feat: add storybook-addon-themes for switching themes

sashtje · Sep 28, 2023 · 6e6e658 · 6e6e658
1 parent 33e2eca
commit 6e6e658
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 1 deletion.
diff --git a/config/storybook/main.ts b/config/storybook/main.ts
@@ -4,9 +4,15 @@ export default {
   ],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        background: false,
+      },
+    },
     '@storybook/addon-interactions',
     'storybook-addon-mock/register',
+    'storybook-addon-themes',
   ],
   framework: '@storybook/react',
   core: {

diff --git a/config/storybook/preview.ts b/config/storybook/preview.ts
@@ -15,6 +15,14 @@ export const parameters = {
     },
   },
   layout: 'fullscreen',
+  themes: {
+    default: 'light',
+    list: [
+      { name: 'light', class: Theme.LIGHT, color: '#fff' },
+      { name: 'dark', class: Theme.DARK, color: '#090949' },
+      { name: 'orange', class: Theme.ORANGE, color: '#9a1a0e' },
+    ],
+  },
 };
 
 addDecorator(StyleDecorator);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,6 +87,7 @@
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
     "storybook-addon-mock": "^2.4.1",
+    "storybook-addon-themes": "^6.1.0",
     "style-loader": "^3.3.1",
     "stylelint": "^14.5.3",
     "stylelint-config-standard-scss": "^3.0.0",