fix(css): stabilize dark mode in production\n\n- Centralize RT CSS variables in src/plugin.css under :root and [data-theme='dark']\n- Use generic [data-theme='dark'] selector for robustness\n- Remove variable definitions from CSS module to avoid scoping/order issues\n\nFixes inconsistent legend/source selector backgrounds and text color in build mode.

Author: Uli-Z

package.json

@@ -1,6 +1,9 @@
 {
   "name": "docusaurus-plugin-resistogram",
   "version": "0.1.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "description": "A Docusaurus plugin to display resistance data tables (resistograms) from simple CSV files.",
   "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -20,7 +23,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/remark/index.ts --format esm --dts && cp -r src/theme dist/",
+    "build": "tsup src/index.ts src/remark/index.ts --format esm --dts && cp -r src/theme dist/ && cp src/plugin.css dist/",
     "dev": "tsup src/index.ts --watch",
     "prepare": "npm run build",
     "clean": "rm -rf dist",

src/index.ts

@@ -40,21 +40,15 @@ export default function docusaurusPluginResistogram(
   );
   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 }: { actions: any }) {

src/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;
+}

src/theme/ResistanceTable/styles.module.css

@@ -2,33 +2,6 @@
    General Styles
    ============================================================================ */
 
-:root {
-  --rt-border-color: #ddd;
-  --rt-background-color: #fff;
-  --rt-text-color: #333;
-  --rt-subtle-background: #f9f9f9;
-  --rt-subtle-background-hover: #f0f0f0;
-  --rt-source-info-background: #f0f0f0;
-  --rt-source-info-text: #666;
-  --rt-empty-cell-background: #f2f2f2;
-  --rt-tooltip-background: rgba(60, 60, 60, 0.9);
-  --rt-tooltip-text: #fff;
-  --rt-tab-radius: 5px;
-}
-
-[data-theme='dark'] {
-  --rt-border-color: #444;
-  --rt-background-color: #1e1e1e;
-  --rt-text-color: #eee;
-  --rt-subtle-background: #252525;
-  --rt-subtle-background-hover: #333;
-  --rt-source-info-background: #333;
-  --rt-source-info-text: #bbb;
-  --rt-empty-cell-background: #2a2a2a;
-  --rt-tooltip-background: rgba(200, 200, 200, 0.9);
-  --rt-tooltip-text: #000;
-}
-
 .error {
   color: red;
   border: 1px solid red;
@@ -291,4 +264,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}