使用ssr-darkreader代替darkreader

.umirc.ts

@@ -9,6 +9,9 @@ export default defineConfig({
     type: 'none',
   },
   fastRefresh: {},
+  // antd: {
+  //   dark: true,
+  // },
   mfsu: {},
   esbuild: {},
   webpack5: {},

package.json

@@ -98,6 +98,7 @@
     "@types/uuid": "^8.3.4",
     "@umijs/plugin-antd": "^0.15.0",
     "@umijs/plugin-esbuild": "^1.4.1",
+    "@umijs/ssr-darkreader": "^4.9.45",
     "@umijs/test": "^3.5.21",
     "ansi-to-react": "^6.1.6",
     "antd": "^4.20.5",
@@ -105,7 +106,6 @@
     "codemirror": "^5.65.2",
     "compression-webpack-plugin": "9.2.0",
     "concurrently": "^7.0.0",
-    "darkreader": "4.9.44",
     "lint-staged": "^12.3.4",
     "nodemon": "^2.0.15",
     "prettier": "^2.5.1",

src/layouts/index.less

@@ -55,7 +55,7 @@
   .ant-pro-page-container-children-content {
     overflow: auto;
     height: 100%;
-    background-color: #fff;
+    background-color: @component-background;
     padding: 16px;
   }
 }
@@ -172,7 +172,7 @@
 }
 
 .Resizer {
-  background: #fff;
+  background: @component-background;
   opacity: 0.2;
   z-index: 1;
   -moz-box-sizing: border-box;
@@ -284,7 +284,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: rgba(0, 0, 0, 0.85);
+  color: @text-color;
 
   .side-menu-collapse-button:hover {
     color: #1890ff;
@@ -301,11 +301,11 @@
   text-align: left;
   outline: none;
   padding: 4px 0;
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid fade(@component-background, 0.12);
   border-radius: 4px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   overflow: auto;
-  background-color: #fff;
+  background-color: @component-background;
 }
 
 [data-dark='true'] .side-menu-user-drop-menu {

src/layouts/index.tsx

@@ -1,11 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import ProLayout, { PageLoading } from '@ant-design/pro-layout';
-import {
-  enable as enableDarkMode,
-  disable as disableDarkMode,
-  auto as followSystemColorScheme,
-  setFetchMethod,
-} from 'darkreader';
+import * as DarkReader from '@umijs/ssr-darkreader';
 import defaultProps from './defaultProps';
 import { Link, history } from 'umi';
 import {
@@ -35,6 +30,13 @@ export default function (props: any) {
   const ws = useRef<any>(null);
   const [socketMessage, setSocketMessage] = useState<any>();
   const [collapsed, setCollapsed] = useState(false);
+  const {
+    enable: enableDarkMode,
+    disable: disableDarkMode,
+    exportGeneratedCSS: collectCSS,
+    setFetchMethod,
+    auto: followSystemColorScheme,
+  } = DarkReader || {};
 
   const logout = () => {
     request.post(`${config.apiPrefix}user/logout`).then(() => {
@@ -121,7 +123,13 @@ export default function (props: any) {
     init();
 
     const _theme = localStorage.getItem('qinglong_dark_theme') || 'auto';
-    setFetchMethod(window.fetch);
+    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') {
@@ -129,6 +137,10 @@ export default function (props: any) {
     } else {
       followSystemColorScheme({});
     }
+
+    return () => {
+      disableDarkMode();
+    };
   }, []);
 
   useEffect(() => {

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 (

src/utils/init.ts

@@ -15,7 +15,7 @@ export function init() {
   // monaco 编辑器配置cdn和locale
   loader.config({
     paths: {
-      vs: 'https://cdn.staticfile.org/monaco-editor/0.32.1/min/vs',
+      vs: 'https://cdn.staticfile.org/monaco-editor/0.33.0/min/vs',
     },
     'vs/nls': {
       availableLanguages: {