From ad48ebbed2ca8e4e1bd0213477dc92fe3003ff1b Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Mon, 18 Nov 2024 22:16:59 +0000
Subject: [PATCH] chore: prepare more fitting dark mode styling for Storybook

---
 .storybook/application.css | 30 ++++++++++++++++++++++++++++++
 .storybook/preview.tsx     |  4 ++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/.storybook/application.css b/.storybook/application.css
index 37b2d1916..1e82818f7 100644
--- 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
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],