Add dark mode support for Storybook (#1834)

temporalio · Jan 30, 2024 · 563937c · 563937c
1 parent 5bbf32a
commit 563937c
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 28 deletions.
diff --git a/.storybook/dark-mode.css b/.storybook/dark-mode.css
@@ -0,0 +1,3 @@
+.sb-show-main.dark {
+  background: #111827;
+}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,37 +1,21 @@
 import type { Preview } from '@storybook/svelte';
+
 import '../src/app.css';
+import './dark-mode.css';
+
+import DarkMode, { useDarkMode } from '../src/lib/utilities/dark-mode';
 
 const preview: Preview = {
+  decorators: [
+    (_, { globals }) => {
+      useDarkMode.set(globals.theme === 'dark');
+      return { Component: DarkMode };
+    },
+  ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: {
-      default: 'primary',
-      values: [
-        {
-          name: 'space-black',
-          value: '#141414',
-        },
-        {
-          name: 'off-white',
-          value: '#f8f8f7',
-        },
-        {
-          name: 'black',
-          value: '#000',
-        },
-        {
-          name: 'white',
-          value: '#fff',
-        },
-        {
-          name: 'light',
-          value: '#f4f4f5',
-        },
-        {
-          name: 'dark',
-          value: '#18181b',
-        },
-      ],
+      disable: true,
     },
     controls: {
       matchers: {
@@ -42,4 +26,18 @@ const preview: Preview = {
   },
 };
 
+export const globalTypes = {
+  theme: {
+    name: 'Toggle Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['light', 'dark'],
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
 export default preview;
diff --git a/src/lib/utilities/dark-mode/dark-mode.svelte b/src/lib/utilities/dark-mode/dark-mode.svelte
@@ -3,3 +3,4 @@
 </script>
 
 <svelte:body use:darkMode />
+<slot />
diff --git a/src/lib/utilities/dark-mode/dark-mode.ts b/src/lib/utilities/dark-mode/dark-mode.ts
@@ -1,6 +1,6 @@
 import { persistStore } from '$lib/stores/persist-store';
 
-const useDarkMode = persistStore(
+export const useDarkMode = persistStore(
   'dark mode',
   !!import.meta.env.VITE_DARK_MODE,
   true,

diff --git a/src/lib/utilities/dark-mode/index.ts b/src/lib/utilities/dark-mode/index.ts
@@ -1,3 +1,4 @@
 import DarkMode from './dark-mode.svelte';
 
 export default DarkMode;
+export { useDarkMode } from './dark-mode';