feat: add storybook themes

TomatoVan · Mar 16, 2024 · 468cd13 · 468cd13
1 parent 9c1f957
commit 468cd13
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/config/storybook/main.js b/config/storybook/main.js
@@ -4,9 +4,15 @@ module.exports = {
     ],
     addons: [
         '@storybook/addon-links',
-        '@storybook/addon-essentials',
+        {
+            name: '@storybook/addon-essentials',
+            options: {
+                backgrounds: false,
+            },
+        },
         '@storybook/addon-interactions',
         'storybook-addon-mock/register',
+        'storybook-addon-themes',
     ],
     framework: '@storybook/react',
     core: {

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

diff --git a/package.json b/package.json
@@ -104,7 +104,8 @@
     "@vitejs/plugin-react": "^2.1.0",
     "vite": "^3.1.0",
     "vite-plugin-svgr": "^2.2.1",
-    "eslint-plugin-unused-imports": "^2.0.0"
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "storybook-addon-themes": "^6.1.0"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.0",