使用ssr-darkreader代替darkreader

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(() => {