diff --git a/ui/public/storybook-overrides.css b/ui/public/storybook-overrides.css
index 079f3d3..bd89d46 100644
--- a/ui/public/storybook-overrides.css
+++ b/ui/public/storybook-overrides.css
@@ -15,11 +15,13 @@
 
 /* Override dark mode in Storybook docs. */
 :root :has(#storybook-docs:not([hidden='true'])) {
-    --color-brand: 270 50% 80%;
-    --color-text: 0 0% 20%;
-    --color-background: 0 0% 100%;
-    --color-neutral-900: 0 0% 0%;
-    --color-neutral-100: 0 0% 85%;
+    @media (prefers-color-scheme: dark) {
+        --color-brand: 270 50% 80%;
+        --color-text: 0 0% 20%;
+        --color-background: 0 0% 100%;
+        --color-neutral-900: 0 0% 0%;
+        --color-neutral-100: 0 0% 85%;
+    }
 
     color-scheme: light !important;
 }