修复主题切换全局class未变化

src/layouts/index.less

@@ -1,3 +1,4 @@
+@import '~antd/lib/style/themes/default.less';
 @import '~@/styles/variable.less';
 @import '~codemirror/lib/codemirror.css';
 
@@ -8,12 +9,12 @@
     url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype');
 }
 
-body {
-  height: 100%;
-  overflow-y: hidden;
-  background-color: rgb(248, 248, 248);
-  width: 100% !important;
-}
+// body {
+//   height: 100%;
+//   overflow-y: hidden;
+//   // background-color: rgb(248, 248, 248);
+//   width: 100% !important;
+// }
 
 .log-modal {
   .ant-modal {
@@ -120,16 +121,6 @@ body {
   }
 }
 
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  transition-delay: 99999s;
-  transition: color 99999s ease-out, background-color 99999s ease-out;
-  -webkit-transition-delay: 99999s;
-  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
-}
-
 .ant-pro-page-container.ql-container-wrapper {
   display: flex;
   flex-direction: column;
@@ -236,7 +227,23 @@ input:-webkit-autofill:active {
   font-size: 13px;
 }
 
-.dark {
+[data-dark='true'] {
+  /* Change autocomplete styles in WebKit */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid @border-color-base;
+    box-shadow: none;
+    transition: background-color 5000s ease-in-out 0s;
+    -webkit-text-fill-color: @text-color;
+  }
+
   ::placeholder {
     opacity: 0.5 !important;
   }

src/layouts/index.tsx

@@ -50,6 +50,18 @@ export default function (props: any) {
     getUser(false);
   };
 
+  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(() => {
     const isAuth = localStorage.getItem(config.authKey);
     if (!isAuth) {
@@ -65,14 +77,8 @@ export default function (props: any) {
   }, [props.location.pathname]);
 
   useEffect(() => {
-    if (theme && theme.theme) {
-      if (theme.theme === 'vs-dark') {
-        document.body.classList.add('dark');
-      } else {
-        document.body.classList.add('white');
-      }
-    }
-  }, [theme]);
+    setTheme();
+  }, [theme.theme]);
 
   useEffect(() => {
     const _theme = localStorage.getItem('qinglong_dark_theme') || 'auto';
@@ -155,6 +161,7 @@ export default function (props: any) {
           ...theme,
           user,
           reloadUser,
+          reloadTheme: setTheme,
         });
       })}
     </ProLayout>