chore: prepare more fitting dark mode styling for Storybook

ably · Nov 19, 2024 · ad48ebb · ad48ebb
1 parent cfe4e2a
commit ad48ebb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/.storybook/application.css b/.storybook/application.css
@@ -28,3 +28,33 @@
     var(--double) var(--double),
     var(--double) var(--double);
 }
+
+.ui-theme-dark,
+.ui-theme-dark .sbdocs {
+  @apply bg-neutral-1300;
+}
+
+.sb-show-main.dark .sb-bar,
+.sb-show-main.dark .sb-anchor > p > code {
+  @apply bg-neutral-1200;
+}
+
+.sb-show-main.dark .docblock-code-toggle {
+  @apply bg-neutral-1200 text-neutral-000;
+}
+
+.sb-show-main.dark .sbdocs h1,
+.sb-show-main.dark .sb-anchor > h3,
+.sb-show-main.dark .sb-anchor > p,
+.sb-show-main.dark .sb-anchor > p > code {
+  @apply text-neutral-000;
+}
+
+.sb-show-main.dark .sbdocs td,
+.sb-show-main.dark .sbdocs th {
+  @apply text-neutral-200;
+}
+
+.sb-show-main.dark .sbdocs td {
+  @apply bg-neutral-1100 text-neutral-200;
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -52,8 +52,8 @@ const preview = {
         brandImage: brandImage,
       },
       stylePreview: true,
-      darkClass: ["bg-neutral-1300"],
-      lightClass: ["bg-neutral-000"],
+      darkClass: ["dark"],
+      lightClass: ["light"],
     },
   },
   loaders: [mswLoader],