docs: enable dark mode in storybook

fand · Aug 15, 2024 · e123e1d · e123e1d
1 parent 63927a2
commit e123e1d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/docs/.storybook/manager.ts b/packages/docs/.storybook/manager.ts
@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { themes } from "@storybook/theming";
+
+addons.setConfig({
+    theme: themes.dark,
+});
diff --git a/packages/docs/.storybook/preview.ts b/packages/docs/.storybook/preview.ts
@@ -1,12 +1,17 @@
-/** @type { import('@storybook/html').Preview } */
-const preview = {
+import { Preview } from "@storybook/html";
+import { themes } from "@storybook/theming";
+
+const preview: Preview = {
     parameters: {
         controls: {
             matchers: {
                 color: /(background|color)$/i,
                 date: /Date$/i,
             },
         },
+        docs: {
+            theme: themes.dark,
+        },
     },
 };
 

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -28,7 +28,9 @@
     "@storybook/blocks": "^8.2.9",
     "@storybook/html": "^8.2.9",
     "@storybook/html-vite": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
     "@storybook/test": "^8.2.9",
+    "@storybook/theming": "^8.2.9",
     "@types/dedent": "^0.7.2",
     "@types/is-mobile": "^2.1.4",
     "@types/lodash.debounce": "^4.0.9",