修复主题切换

src/layouts/index.tsx

@@ -23,7 +23,7 @@ import { init } from '../utils/init';
 
 export default function (props: any) {
   const ctx = useCtx();
-  const theme = useTheme();
+  const { theme, reloadTheme } = useTheme();
   const [user, setUser] = useState<any>({});
   const [loading, setLoading] = useState<boolean>(true);
   const [systemInfo, setSystemInfo] = useState<{ isInitialized: boolean }>();
@@ -90,18 +90,6 @@ export default function (props: any) {
     getUser(needLoading);
   };
 
-  const setTheme = () => {
-    const media = window.matchMedia('(prefers-color-scheme: dark)');
-    const storageTheme = localStorage.getItem('qinglong_dark_theme');
-    const isDark =
-      (media.matches && storageTheme !== 'light') || storageTheme === 'dark';
-    if (isDark) {
-      document.body.setAttribute('data-dark', 'true');
-    } else {
-      document.body.setAttribute('data-dark', 'false');
-    }
-  };
-
   useEffect(() => {
     if (systemInfo && systemInfo.isInitialized && !user) {
       getUser();
@@ -115,8 +103,12 @@ export default function (props: any) {
   }, [systemInfo]);
 
   useEffect(() => {
-    setTheme();
-  }, [theme.theme]);
+    if (theme === 'vs-dark') {
+      document.body.setAttribute('data-dark', 'true');
+    } else {
+      document.body.setAttribute('data-dark', 'false');
+    }
+  }, [theme]);
 
   useEffect(() => {
     vhCheck();
@@ -208,10 +200,10 @@ export default function (props: any) {
       return React.Children.map(props.children, (child) => {
         return React.cloneElement(child, {
           ...ctx,
-          ...theme,
+          theme,
           user,
           reloadUser,
-          reloadTheme: setTheme,
+          reloadTheme,
           ws: ws.current,
         });
       });
@@ -331,10 +323,10 @@ export default function (props: any) {
       {React.Children.map(props.children, (child) => {
         return React.cloneElement(child, {
           ...ctx,
-          ...theme,
+          theme,
           user,
           reloadUser,
-          reloadTheme: setTheme,
+          reloadTheme,
           socketMessage,
         });
       })}

src/pages/setting/index.tsx

@@ -111,8 +111,7 @@ const Setting = ({
   ];
 
   const [loading, setLoading] = useState(true);
-  const defaultDarken = localStorage.getItem('qinglong_dark_theme') || 'auto';
-  const [theme, setTheme] = useState(defaultDarken);
+  const defaultTheme = localStorage.getItem('qinglong_dark_theme') || 'auto';
   const [dataSource, setDataSource] = useState<any[]>([]);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [editedApp, setEditedApp] = useState<any>();
@@ -130,8 +129,18 @@ const Setting = ({
   } = DarkReader || {};
 
   const themeChange = (e: any) => {
-    setTheme(e.target.value);
+    const _theme = e.target.value;
     localStorage.setItem('qinglong_dark_theme', e.target.value);
+    setFetchMethod(fetch);
+
+    if (_theme === 'dark') {
+      enableDarkMode({});
+    } else if (_theme === 'light') {
+      disableDarkMode();
+    } else {
+      followSystemColorScheme({});
+    }
+    reloadTheme();
   };
 
   const getApps = () => {
@@ -302,30 +311,6 @@ const Setting = ({
     });
   };
 
-  useEffect(() => {
-    const _theme = localStorage.getItem('qinglong_dark_theme') || 'auto';
-    if (typeof window === 'undefined') return;
-    if (typeof window.matchMedia === 'undefined') return;
-    if (!DarkReader) {
-      return () => null;
-    }
-    setFetchMethod(fetch);
-
-    if (_theme === 'dark') {
-      enableDarkMode({});
-    } else if (_theme === 'light') {
-      disableDarkMode();
-    } else {
-      followSystemColorScheme({});
-    }
-    reloadTheme(theme);
-
-    // unmount
-    return () => {
-      disableDarkMode();
-    };
-  }, [theme]);
-
   return (
     <PageContainer
       className="ql-container-wrapper"
@@ -371,11 +356,15 @@ const Setting = ({
         </Tabs.TabPane>
         <Tabs.TabPane tab="其他设置" key="other">
           <Form layout="vertical" form={form}>
-            <Form.Item label="主题设置" name="theme" initialValue={theme}>
+            <Form.Item
+              label="主题设置"
+              name="theme"
+              initialValue={defaultTheme}
+            >
               <Radio.Group
                 options={optionsWithDisabled}
                 onChange={themeChange}
-                value={theme}
+                value={defaultTheme}
                 optionType="button"
                 buttonStyle="solid"
               />

src/utils/hooks.ts

@@ -38,7 +38,15 @@ export const useCtx = () => {
 };
 
 export const useTheme = () => {
-  const [theme, setTheme] = useState<string>('');
+  const [theme, setTheme] = useState<'vs' | 'vs-dark'>();
+
+  const reloadTheme = () => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const storageTheme = localStorage.getItem('qinglong_dark_theme');
+    const isDark =
+      (media.matches && storageTheme !== 'light') || storageTheme === 'dark';
+    setTheme(isDark ? 'vs-dark' : 'vs');
+  };
 
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
@@ -63,5 +71,5 @@ export const useTheme = () => {
     }
   }, []);
 
-  return { theme };
+  return { theme, reloadTheme };
 };