set up @storybook/addon-themes

DaleStudy · Dec 25, 2024 · 8d08e93 · 8d08e93
1 parent 8d37e8a
commit 8d08e93
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 4 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/react-vite",

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,6 @@
 import "../src/index.css";
-
-import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
@@ -14,6 +14,15 @@ const preview: Preview = {
       toc: true,
     },
   },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
   tags: ["autodocs"],
 };
 

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",

diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts
@@ -2,7 +2,7 @@ import { defineGlobalStyles } from "@pandacss/dev";
 
 export const globalCss = defineGlobalStyles({
   ":root": {
-    "--global-font-body": "var  (--fonts-sans)",
+    "--global-font-body": "var(--fonts-sans)",
   },
   h1: {
     fontSize: "var(--font-sizes-4xl)", // 2.25rem