diff --git a/.storybook/application.css b/.storybook/application.css
index 37b2d1916..5bb25be19 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -28,3 +28,32 @@
     var(--double) var(--double),
     var(--double) var(--double);
 }
+
+.sb-show-main.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
index 214641d38..390e87e5e 100644
--- 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],