使用ssr-darkreader代替darkreader

src/pages/log/index.module.less

@@ -1,10 +1,11 @@
+@import '~antd/es/style/themes/default.less';
 @import '~@/styles/variable.less';
 
 .left-tree {
   &-container {
     overflow: hidden;
     position: relative;
-    background-color: #fff;
+    background-color: @component-background;
     height: calc(100vh - 128px);
     height: calc(100vh - var(--vh-offset, 0px) - 128px);
     display: flex;
@@ -25,6 +26,6 @@
 :global {
   .Pane.vertical.Pane1 {
     padding-right: 5px;
-    border-right: 1px dashed #f0f0f0;
+    border-right: 1px dashed @text-color;
   }
 }

src/pages/script/index.module.less

@@ -1,10 +1,11 @@
+@import '~antd/es/style/themes/default.less';
 @import '~@/styles/variable.less';
 
 .left-tree {
   &-container {
     overflow: hidden;
     position: relative;
-    background-color: #fff;
+    background-color: @component-background;
     height: calc(100vh - 128px);
     height: calc(100vh - var(--vh-offset, 0px) - 128px);
     display: flex;
@@ -25,6 +26,6 @@
 :global {
   .Pane.vertical.Pane1 {
     padding-right: 5px;
-    border-right: 1px dashed #f0f0f0;
+    border-right: 1px dashed @text-color;
   }
 }

src/pages/setting/index.tsx

@@ -17,12 +17,7 @@ import {
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
-import {
-  enable as enableDarkMode,
-  disable as disableDarkMode,
-  auto as followSystemColorScheme,
-  setFetchMethod,
-} from 'darkreader';
+import * as DarkReader from '@umijs/ssr-darkreader';
 import AppModal from './appModal';
 import {
   EditOutlined,
@@ -126,6 +121,13 @@ const Setting = ({
   const [notificationInfo, setNotificationInfo] = useState<any>();
   const [logRemoveFrequency, setLogRemoveFrequency] = useState<number>();
   const [form] = Form.useForm();
+  const {
+    enable: enableDarkMode,
+    disable: disableDarkMode,
+    exportGeneratedCSS: collectCSS,
+    setFetchMethod,
+    auto: followSystemColorScheme,
+  } = DarkReader || {};
 
   const themeChange = (e: any) => {
     setTheme(e.target.value);
@@ -301,15 +303,27 @@ const Setting = ({
   };
 
   useEffect(() => {
-    setFetchMethod(window.fetch);
-    if (theme === 'dark') {
+    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') {
+    } else if (_theme === 'light') {
       disableDarkMode();
     } else {
       followSystemColorScheme({});
     }
     reloadTheme(theme);
+
+    // unmount
+    return () => {
+      disableDarkMode();
+    };
   }, [theme]);
 
   return (