chore: install Storybook addon themes (#5785)

* fix: fix dark mode not working

* chore: install Storybook addon themes

Author: HinataKah0

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-controls',
     '@storybook/addon-interactions',
+    '@storybook/addon-themes',
     '@storybook/addon-viewport',
   ],
   framework: { name: '@storybook/nextjs', options: {} },

.storybook/preview.tsx

@@ -3,7 +3,8 @@ import { Open_Sans } from 'next/font/google';
 import { SiteProvider } from '../providers/siteProvider';
 import { ThemeProvider } from '../providers/themeProvider';
 import { LocaleProvider } from '../providers/localeProvider';
-import type { Preview } from '@storybook/react';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import type { Preview, ReactRenderer } from '@storybook/react';
 
 import '../styles/new/index.scss';
 
@@ -49,6 +50,14 @@ export const decorators = [
       </LocaleProvider>
     </SiteProvider>
   ),
+  withThemeByDataAttribute<ReactRenderer>({
+    themes: {
+      light: '',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+    attributeName: 'data-theme',
+  }),
 ];
 
 Object.defineProperty(NextImage, 'default', {

package-lock.json

@@ -83,6 +83,7 @@
   "devDependencies": {
     "@storybook/addon-controls": "~7.4.0",
     "@storybook/addon-interactions": "~7.4.0",
+    "@storybook/addon-themes": "^7.4.1",
     "@storybook/addon-viewport": "~7.4.0",
     "@storybook/nextjs": "~7.4.0",
     "@testing-library/jest-dom": "~6.1.3",

package.json

@@ -111,6 +111,6 @@ export default {
     fontFamily: {
       'open-sans': ['var(--font-open-sans)'],
     },
-    darkMode: ['class', '[data-theme="dark"]'],
   },
+  darkMode: ['class', '[data-theme="dark"]'],
 } satisfies Config;