chore: Improve storybook theming

web/libs/storybook/.storybook/main.ts

@@ -3,6 +3,8 @@ import type { StorybookConfig } from "@storybook/react-webpack5";
 const config: StorybookConfig = {
   stories: ["../../../libs/**/*.@(mdx|stories.@(js|jsx|ts|tsx))", "../../../apps/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
 
+  staticDirs: ["../public"],
+
   addons: ["@nx/react/plugins/storybook", "@storybook/addon-docs", "../addons/theme-toggle/register"],
 
   webpackFinal(config) {
@@ -41,7 +43,9 @@ const config: StorybookConfig = {
           if (cssLoader && cssLoader.options) {
             cssLoader.options.modules = {
               localIdentName: `${css_prefix}[local]`,
-              getLocalIdent(_ctx: any, _ident: any, className: string) {
+              getLocalIdent(ctx: any, _ident: any, className: string) {
+                // Skip prefixing for Storybook preview styles (targets Storybook DOM classes)
+                if (ctx.resourcePath?.includes("preview.scss")) return className;
                 if (className.includes("ant")) return className;
               },
             };

web/libs/storybook/.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming/create";
+
+const theme = create({
+  base: "dark",
+  brandTitle: "Label Studio",
+  brandUrl: "https://labelstud.io",
+  brandImage: "/logo.svg",
+  brandTarget: "_blank",
+});
+
+addons.setConfig({
+  theme,
+});

web/libs/storybook/.storybook/preview.scss

@@ -2,14 +2,14 @@
 
 body {
   height: 100vh;
-  color: var(--color-neutral-content);
-  background-color: var(--color-neutral-background);
+  color: var(--color-neutral-content) !important;
+  background-color: var(--color-neutral-background) !important;
 }
 
-#storybook-root {
+#storybook-root, #storybook-docs, .sbdocs {
   height: 100%;
-  color: var(--color-neutral-content);
-  background-color: var(--color-neutral-background);
+  color: var(--color-neutral-content) !important;
+  background-color: var(--color-neutral-background) !important;
 }
 
 // Undo tailwind reset for the Docs pages
@@ -19,12 +19,137 @@ body {
 #storybook-docs .sbdocs-content h4:not(.sbdocs-preview *),
 #storybook-docs .sbdocs-content h5:not(.sbdocs-preview *),
 #storybook-docs .sbdocs-content h6:not(.sbdocs-preview *) {
-  color: var(--color-sand-800) !important;
+  color: var(--color-neutral-content) !important;
 }
 
 
 // Within Doc Pages apply the theme colors only to the preview blocks
 .sbdocs-preview {
   background-color: var(--color-neutral-background) !important;
-  color: var(--color-neutral-content);
+  color: var(--color-neutral-content) !important;
+}
+
+// Style Storybook docs UI elements for dark mode support
+#storybook-docs {
+  // Args table (props documentation)
+  .docblock-argstable {
+    color: var(--color-neutral-content) !important;
+
+    thead, tbody, tr, th, td {
+      color: var(--color-neutral-content) !important;
+      background-color: var(--color-neutral-background) !important;
+      border-color: var(--color-neutral-border) !important;
+    }
+
+    // Table header styling
+    th {
+      color: var(--color-neutral-content-subtle) !important;
+    }
+
+    // Property names and descriptions
+    td {
+      span, p, div {
+        color: var(--color-neutral-content) !important;
+      }
+    }
+  }
+
+  // General content area
+  .sbdocs-content {
+    color: var(--color-neutral-content) !important;
+
+    p, span, div, li, code {
+      color: inherit !important;
+    }
+  }
+
+  // Code blocks - ensure text is readable on dark backgrounds
+  code, pre {
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+  }
+
+  // Inline code in args table (type annotations, default values)
+  .docblock-argstable code,
+  .docblock-argstable span[class*="css-"] {
+    color: var(--color-neutral-content) !important;
+  }
+
+  // Type signature chips (e.g., "(element: HTMLElement) => boolean")
+  .docblock-argstable td div[class*="css-"] > span[class*="css-"] {
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+  }
+
+  // Default value chips (e.g., "false", "true")
+  .docblock-argstable td > span[class*="css-"] {
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+  }
+
+  // Form controls in args table (selects, inputs, toggles)
+  .docblock-argstable select,
+  .docblock-argstable textarea,
+  .docblock-argstable input:not([role="switch"]) {
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+    border-color: var(--color-neutral-border) !important;
+  }
+
+
+  // Toggle switches (label with for starting with "control-")
+  .docblock-argstable label[for^="control-"] {
+    background: var(--color-neutral-background) !important;
+    border: 1px solid var(--color-neutral-border) !important;
+  }
+  .docblock-argstable input[role="switch"] {
+    // Toggle text labels (False/True)
+    & ~ span[aria-hidden="true"] {
+      color: var(--color-neutral-content) !important;
+      background-color: var(--color-neutral-background) !important;
+    }
+
+    // Checked state - use primary color
+    &:checked {
+      & ~ span:last-of-type {
+        background-color: var(--color-primary-background) !important;
+        color: var(--color-neutral-on-dark-content) !important;
+      }
+    }
+    &:not(:checked) {
+      & ~ span:first-of-type {
+        background-color: var(--color-primary-background) !important;
+        color: var(--color-neutral-on-dark-content) !important;
+      }
+    }
+  }
+
+  // Buttons (Set boolean, Set string, Set object, etc.)
+  .docblock-argstable button {
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+    border-color: var(--color-neutral-border) !important;
+  }
+
+  // Show code / Hide code toggle buttons
+  .docblock-code-toggle {
+    border-radius: 0 !important;
+    background-color: var(--color-neutral-surface) !important;
+    color: var(--color-neutral-content) !important;
+    border-color: var(--color-neutral-border) !important;
+  }
+
+  // Preview toolbar (zoom controls, etc.)
+  .sbdocs-preview .sb-bar {
+    background-color: var(--color-neutral-surface) !important;
+    border-color: var(--color-neutral-border) !important;
+
+    button {
+      color: var(--color-neutral-content) !important;
+
+      svg {
+        fill: currentColor !important;
+      }
+    }
+  }
 }