From 76c079b14ab3e782adc82d422aae0d6117604ef8 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 | 29 +++++++++++++++++++++++++++++
 .storybook/preview.tsx     |  4 ++--
 2 files changed, 31 insertions(+), 2 deletions(-)

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],