From 93c749bb163a28792483a39b732a7816467a8204 Mon Sep 17 00:00:00 2001
From: jerensl <54782057+jerensl@users.noreply.github.com>
Date: Fri, 15 Sep 2023 14:55:17 +0800
Subject: [PATCH] fix(theme-swticher): fix the theme switcher and add theme
 switch for storybook

---
 .storybook/{preview.js => preview.ts} | 5 ++---
 tailwind.config.js                    | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename .storybook/{preview.js => preview.ts} (58%)

diff --git a/.storybook/preview.js b/.storybook/preview.ts
similarity index 58%
rename from .storybook/preview.js
rename to .storybook/preview.ts
index 1a931bf6..7c30d490 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.ts
@@ -1,13 +1,12 @@
 import '../src/styles/globals.css'
-import { withThemeByDataAttribute } from '@storybook/addon-styling'
+import { withThemeByClassName } from '@storybook/addon-styling'
 
 export const decorators = [
-    withThemeByDataAttribute({
+    withThemeByClassName({
         themes: {
             light: 'light',
             dark: 'dark',
         },
         defaultTheme: 'light',
-        attributeName: 'data-mode',
     }),
 ]
diff --git a/tailwind.config.js b/tailwind.config.js
index 64a9092a..803a59d6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ['class', '[data-mode="dark"]'],
+    darkMode: ['class'],
     content: [
         './src/pages/**/*.{js,ts,jsx,tsx}',
         './src/components/**/*.{js,ts,jsx,tsx}',