fix(dark-mode): ensure dark theme works in production

- Add inline color palette based on useColorMode
- Style SourceSwitcher, Legend, Tooltip, table headers and row labels inline
- Inline fallback for empty-cell background
- Add Root theme wrapper to import plugin.css
- Expose CSS variables globally in styles.module.css via :global selectors

This fixes missing text/background colors for Source selector, Legend, and headers in production builds.

Author: Uli-Z

dist/index.mjs

@@ -2165,18 +2165,13 @@ function docusaurusPluginResistogram(ctx, opts = {}) {
     pluginId
   );
   (0, import_fs_extra.ensureDirSync)(pluginDataDir);
-  const isProd = process.env.NODE_ENV === "production";
   return {
     name: "docusaurus-plugin-resistogram",
     getThemePath() {
       return path.resolve(__dirname, "./theme");
     },
-    // Explicitly add the theme's stylesheet to the client modules only for the production build.
-    // This is a workaround for an issue where the styles are not being picked up automatically
-    // in the production build. In development, this is disabled to allow for hot-reloading
-    // and correct dark mode behavior.
     getClientModules() {
-      return isProd ? [path.resolve(__dirname, "./theme/ResistanceTable/styles.module.css")] : [];
+      return [path.resolve(__dirname, "./plugin.css")];
     },
     async contentLoaded({ actions }) {
       const { abx, org, sources, hierarchicalSources, allAbxIds, allOrgIds, orgClasses, orgIdToRank, abxSyn2Id, orgSyn2Id } = await getSharedData(dataPath, files);

dist/plugin.css

@@ -0,0 +1,43 @@
+:root {
+  /* Core colors */
+  --rt-border-color: #ddd;
+  --rt-background-color: #fff;
+  --rt-text-color: #333;
+
+  /* Component backgrounds */
+  --rt-subtle-background: #f9f9f9;
+  --rt-subtle-background-hover: #f0f0f0;
+  --rt-source-info-background: #f0f0f0;
+  --rt-source-info-text: #666;
+  --rt-empty-cell-background: #f2f2f2;
+
+  /* Tooltip */
+  --rt-tooltip-background: rgba(60, 60, 60, 0.9);
+  --rt-tooltip-text: #fff;
+
+  /* Shape */
+  --rt-tab-radius: 5px;
+}
+/*
+  Use a generic [data-theme='dark'] selector so variables apply
+  regardless of whether Docusaurus sets the attribute on html or body.
+  Centralizing all variables here avoids CSS-module scoping/order issues
+  between dev and production builds.
+*/
+[data-theme='dark'] {
+  /* Core colors */
+  --rt-border-color: #444;
+  --rt-background-color: #1e1e1e;
+  --rt-text-color: #eee;
+
+  /* Component backgrounds */
+  --rt-subtle-background: #252525;
+  --rt-subtle-background-hover: #333;
+  --rt-source-info-background: #333;
+  --rt-source-info-text: #bbb;
+  --rt-empty-cell-background: #2a2a2a;
+
+  /* Tooltip */
+  --rt-tooltip-background: rgba(200, 200, 200, 0.9);
+  --rt-tooltip-text: #000;
+}

dist/theme/ResistanceTable/components/Legend.jsx

@@ -4,11 +4,18 @@ import React from 'react';
 // Helper function to remove type annotations for JS conversion
 const identity = (props) => props;
 
-export const Legend = ({ cols, displayMode, styles }) => {
+export const Legend = ({ cols, displayMode, styles, palette }) => {
   if (displayMode === 'full') return null;
 
   return (
-    <div className={styles.legend}>
+    <div
+      className={styles.legend}
+      style={{
+        backgroundColor: palette?.subtleBg,
+        borderTop: `1px solid ${palette?.border}`,
+        color: palette?.text,
+      }}
+    >
       {cols.map((c, i) => (
         <span key={c.id}>
           <b>{displayMode === 'superCompact' ? `[${i + 1}]` : c.short}:</b>{' '}

dist/theme/ResistanceTable/components/TableBody.jsx

@@ -15,6 +15,7 @@ export const TableBody = ({
   styles,
   colorMode,
   sourceId2ShortName,
+  palette,
   t,
 }) => {
   return (
@@ -35,6 +36,7 @@ export const TableBody = ({
           onHideTooltip={onHideTooltip}
           styles={styles}
           colorMode={colorMode}
+          palette={palette}
           sourceId2ShortName={sourceId2ShortName}
           t={t}
         />

dist/theme/ResistanceTable/components/TableHeader.jsx

@@ -10,6 +10,7 @@ export const TableHeader = ({
   onShowTooltip,
   onHideTooltip,
   styles,
+  palette,
 }) => {
   const abxCol = { whiteSpace: 'nowrap', width: '1%' };
 
@@ -29,6 +30,7 @@ export const TableHeader = ({
             onShowTooltip={onShowTooltip}
             onHideTooltip={onHideTooltip}
             styles={styles}
+            palette={palette}
           />
         ))}
       </tr>

dist/theme/ResistanceTable/components/TableHeaderCell.jsx

@@ -12,6 +12,7 @@ export const TableHeaderCell = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
+    palette,
   }) => {
     const highlight = hoveredCol === colIndex;
 
@@ -42,6 +43,7 @@ export const TableHeaderCell = React.memo(
       <th
         style={{
           cursor: displayMode !== 'full' ? 'help' : 'default',
+          color: palette?.text,
           ...(highlight ? hl : {}),
         }}
         onMouseEnter={handleMouseEnter}

dist/theme/ResistanceTable/components/TableRow.jsx

@@ -16,6 +16,7 @@ export const TableRow = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
+    palette,
     colorMode,
     sourceId2ShortName,
     t,
@@ -45,6 +46,7 @@ export const TableRow = React.memo(
         <td
           style={{
             ...abxCol,
+            color: palette?.text,
             ...(highlight ? hl : {}),
             cursor: displayMode !== 'full' ? 'help' : 'default',
           }}

dist/theme/ResistanceTable/index.jsx

@@ -108,6 +108,37 @@ export default function ResistanceTable(props) {
 
   const { colorMode } = useColorMode();
 
+  const palette = useMemo(() => {
+    if (colorMode === 'dark') {
+      return {
+        border: '#444',
+        background: '#1e1e1e',
+        text: '#eee',
+        subtleBg: '#252525',
+        subtleBgHover: '#333',
+        sourceInfoBg: '#333',
+        sourceInfoText: '#bbb',
+        emptyCellBg: '#2a2a2a',
+        tooltipBg: 'rgba(200, 200, 200, 0.9)',
+        tooltipText: '#000',
+        overlay: 'rgba(30, 30, 30, 0.7)',
+      };
+    }
+    return {
+      border: '#ddd',
+      background: '#fff',
+      text: '#333',
+      subtleBg: '#f9f9f9',
+      subtleBgHover: '#f0f0f0',
+      sourceInfoBg: '#f0f0f0',
+      sourceInfoText: '#666',
+      emptyCellBg: '#f2f2f2',
+      tooltipBg: 'rgba(60, 60, 60, 0.9)',
+      tooltipText: '#fff',
+      overlay: 'rgba(255, 255, 255, 0.7)',
+    };
+  }, [colorMode]);
+
   const [showEmpty, setShowEmpty] = useState(showEmptyProp === 'true');
   const [display, setDisplay] = useState('full');
   const [hover, setHover] = useState({ row: null, col: null });
@@ -383,13 +414,18 @@ export default function ResistanceTable(props) {
     const isStale = isLoading && data && data.length > 0;
     const isInitialLoad = isLoading && (!data || data.length === 0);
 
-    if (isInitialLoad) return <div className={styles.placeholder}><div className={styles.spinner} />{t('loading')}</div>;
+    if (isInitialLoad) return (
+      <div className={styles.placeholder} style={{ color: palette.sourceInfoText }}>
+        <div className={styles.spinner} style={{ border: `3px solid ${palette.subtleBgHover}`, borderTopColor: palette.text }} />
+        {t('loading')}
+      </div>
+    );
     if (error) return <div className={styles.error}>{t('generationFailed')}: {error.message}</div>;
 
     const unresolvedIds = [...unresolvedAbx, ...unresolvedOrg];
     if (unresolvedIds.length > 0) {
       return (
-        <div className={styles.noDataContainer}>
+        <div className={styles.noDataContainer} style={{ backgroundColor: palette.subtleBg, color: palette.text }}>
           <p><strong>{t('resistanceTable')}</strong></p>
           <p>{t('unrecognizedIdentifiers')}:</p>
           <ul className={styles.noDataList}>
@@ -406,7 +442,7 @@ export default function ResistanceTable(props) {
       const orgNames = organismIds.map(idToName);
 
       return (
-        <div className={styles.noDataContainer}>
+        <div className={styles.noDataContainer} style={{ backgroundColor: palette.subtleBg, color: palette.text }}>
           <p><strong>{t('resistanceTable')}</strong></p>
           <p>{t('noDataForCombination')}:</p>
           {abxNames.length > 0 && (
@@ -424,13 +460,17 @@ export default function ResistanceTable(props) {
 
     return (
       <>
-        {isStale && <div className={styles.tableOverlay}><div className={styles.spinner} /></div>}
-        <table ref={tableRef} className={styles.resistanceTable} style={{ borderCollapse: 'separate', borderSpacing: 0 }}>
-          <TableHeader {...{ cols, displayMode: display, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles }} />
-          <TableBody {...{ data, cols, displayMode: display, rowsAreAbx, hoveredRow: hover.row, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, colorMode, sourceId2ShortName, t }} />
+        {isStale && (
+          <div className={styles.tableOverlay} style={{ backgroundColor: palette.overlay }}>
+            <div className={styles.spinner} style={{ border: `3px solid ${palette.subtleBgHover}`, borderTopColor: palette.text }} />
+          </div>
+        )}
+        <table ref={tableRef} className={styles.resistanceTable} style={{ borderCollapse: 'separate', borderSpacing: 0, color: palette.text }}>
+          <TableHeader {...{ cols, displayMode: display, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, palette }} />
+          <TableBody {...{ data, cols, displayMode: display, rowsAreAbx, hoveredRow: hover.row, hoveredCol: hover.col, onSetHover: handleSetHover, onClearHover: handleClearHover, onShowTooltip: showTooltip, onHideTooltip: hideTooltip, styles, colorMode, sourceId2ShortName, palette, t }} />
         </table>
-        <Legend {...{ cols, displayMode: display, styles }} />
-        <div className={styles.sourceInfo}>
+        <Legend {...{ cols, displayMode: display, styles, palette }} />
+        <div className={styles.sourceInfo} style={{ backgroundColor: palette.sourceInfoBg, borderTop: `1px solid ${palette.border}`, color: palette.sourceInfoText }}>
           {renderHiddenInfo()}
           {sourceChain.length > 0 && (
             <>
@@ -464,7 +504,7 @@ export default function ResistanceTable(props) {
       <div ref={containerRef} style={{ minHeight: '150px' }}>
         <div className={styles.rootContainer}>
           {hierarchicalSources.length > 0 && (
-            <SourceSwitcher {...{ sources: hierarchicalSources, selected: selectedSource, onSelect: setSelectedSource, styles, locale }} />
+            <SourceSwitcher {...{ sources: hierarchicalSources, selected: selectedSource, onSelect: setSelectedSource, styles, locale, palette }} />
           )}
           <div className={styles.tableContainer}>
             {renderContent()}
@@ -475,9 +515,15 @@ export default function ResistanceTable(props) {
       <RadixTooltip.Root open={tooltipOpen} onOpenChange={setTooltipOpen}>
         <RadixTooltip.Trigger asChild><VirtualTrigger ref={virtualTriggerRef} /></RadixTooltip.Trigger>
         <RadixTooltip.Portal>
-          <RadixTooltip.Content side="top" align="center" sideOffset={5} className={styles.tooltipContent}>
+          <RadixTooltip.Content
+            side="top"
+            align="center"
+            sideOffset={5}
+            className={styles.tooltipContent}
+            style={{ backgroundColor: palette.tooltipBg, color: palette.tooltipText }}
+          >
             {tooltipContent}
-            <RadixTooltip.Arrow width={8} height={4} className={styles.tooltipArrow} />
+            <RadixTooltip.Arrow width={8} height={4} className={styles.tooltipArrow} style={{ fill: palette.tooltipBg }} />
           </RadixTooltip.Content>
         </RadixTooltip.Portal>
       </RadixTooltip.Root>

dist/theme/ResistanceTable/styles.module.css

@@ -1,34 +1,55 @@
 /* ============================================================================
-   General Styles
+   CSS Variables (Global)
    ============================================================================ */
 
-:root {
+:global(:root) {
+  /* Core colors */
   --rt-border-color: #ddd;
   --rt-background-color: #fff;
   --rt-text-color: #333;
+
+  /* Component backgrounds */
   --rt-subtle-background: #f9f9f9;
   --rt-subtle-background-hover: #f0f0f0;
   --rt-source-info-background: #f0f0f0;
   --rt-source-info-text: #666;
   --rt-empty-cell-background: #f2f2f2;
+
+  /* Tooltip */
   --rt-tooltip-background: rgba(60, 60, 60, 0.9);
   --rt-tooltip-text: #fff;
+
+  /* Shape */
   --rt-tab-radius: 5px;
 }
 
-[data-theme='dark'] {
+/*
+  Use a generic [data-theme='dark'] selector so variables apply
+  regardless of whether Docusaurus sets the attribute on html or body.
+  Wrap in :global so CSS-module scoping doesn't interfere in prod builds.
+*/
+:global([data-theme='dark']) {
+  /* Core colors */
   --rt-border-color: #444;
   --rt-background-color: #1e1e1e;
   --rt-text-color: #eee;
+
+  /* Component backgrounds */
   --rt-subtle-background: #252525;
   --rt-subtle-background-hover: #333;
   --rt-source-info-background: #333;
   --rt-source-info-text: #bbb;
   --rt-empty-cell-background: #2a2a2a;
+
+  /* Tooltip */
   --rt-tooltip-background: rgba(200, 200, 200, 0.9);
   --rt-tooltip-text: #000;
 }
 
+/* ============================================================================
+   General Styles
+   ============================================================================ */
+
 .error {
   color: red;
   border: 1px solid red;
@@ -291,4 +312,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}