feat: 主题现在可动态变化

LeafYeeXYZ · Nov 18, 2024 · b3e21f8 · b3e21f8
1 parent 814b97e
commit b3e21f8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -26,15 +26,11 @@ const ANTD_THEME_DARK: ThemeConfig = {
 
 export function App() {
 
-  const { data, _App_setMessageApi, disabled, isDarkMode } = useZustand()
+  const { data, _App_setMessageApi, disabled, isDarkMode, _App_setIsDarkMode } = useZustand()
   // 加载完成后切换页面标题
   useEffect(() => {
     document.title = 'PsychPen'
   }, [])
-  // 黑暗模式
-  useEffect(() => {
-    isDarkMode ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')
-  }, [isDarkMode])
   // 页面切换
   const [page, setPage] = useState<React.ReactElement>(<DataView />)
   const [activePage, setActivePage] = useState<string>('data')
@@ -52,6 +48,13 @@ export function App() {
     })
     valid || messageApi.warning('当前浏览器版本较低, 可能会导致部分功能无法正常使用, 请使用最新版本的 Chrome, Firefox, Safari 或 Edge 浏览器', 8)
   }, [messageApi, _App_setMessageApi])
+  // 动态设置主题
+  useEffect(() => {
+    const getIsDarkMode = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+    const subIsDarkMode = () => _App_setIsDarkMode(getIsDarkMode())
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', subIsDarkMode)
+    return () => window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', subIsDarkMode)
+  }, [_App_setIsDarkMode])
 
   return (
     <ConfigProvider theme={isDarkMode ? ANTD_THEME_DARK : ANTD_THEME_LIGHT}>

diff --git a/src/lib/useZustand.ts b/src/lib/useZustand.ts
@@ -60,10 +60,10 @@ export const useZustand = create<GlobalState>()((set) => ({
   _App_setMessageApi: (api) => set({ messageApi: api }),
   disabled: false,
   setDisabled: (disabled) => set({ disabled }),
-  isDarkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
+  isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
+  _App_setIsDarkMode: (isDarkMode) => set({ isDarkMode }),
 }))
 
-
 type GlobalState = {
   /**
    * 原始数据
@@ -111,6 +111,11 @@ type GlobalState = {
    * 是否是黑暗模式
    */
   isDarkMode: boolean
+  /**
+   * 设置是否是黑暗模式
+   * @param isDarkMode 是否是黑暗模式
+   */
+  _App_setIsDarkMode: (isDarkMode: boolean) => void
   /**
    * 是否禁用各种按钮等
    */

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,17 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'selector',
+  darkMode: 'media',
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}',
   ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        'item-cover': 'var(--background-img)'
-      }
-    },
-  },
   plugins: [],
 }