feat(storybook): enable dark mode toggle (#1016)

packages/component/.storybook/main.ts

@@ -3,7 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 export default {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../../apps/web/public'],
-  addons: ['@storybook/addon-links'],
+  addons: ['@storybook/addon-links', 'storybook-dark-mode-v7'],
   framework: {
     name: '@storybook/react-vite',
     options: {

packages/component/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { getLightTheme, ThemeProvider } from '../src';
-
+import { getDarkTheme, getLightTheme, ThemeProvider } from '../src';
+import { useDarkMode } from 'storybook-dark-mode-v7';
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -12,11 +12,13 @@ export const parameters = {
 };
 
 const lightTheme = getLightTheme('page');
+const darkTheme = getDarkTheme('page');
 
 export const decorators = [
   (Story: React.ComponentType) => {
+    const isDark = useDarkMode();
     return (
-      <ThemeProvider theme={lightTheme}>
+      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
         <Story />
       </ThemeProvider>
     );

packages/component/package.json

@@ -37,6 +37,7 @@
     "@types/react-dom": "18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "storybook": "^7.0.0-beta.46",
+    "storybook-dark-mode-v7": "3.0.0-alpha.0",
     "swc": "^1.0.11",
     "swc-loader": "^0.2.3",
     "typescript": "^4.9.5",