支持暗黑模式

src/layouts/defaultProps.tsx

@@ -5,8 +5,8 @@ import {
   SettingOutlined,
   CodeOutlined,
   FolderOutlined,
-  LockOutlined,
   RadiusSettingOutlined,
+  ControlOutlined,
 } from '@ant-design/icons';
 import logo from '@/assets/logo.png';
 
@@ -28,7 +28,7 @@ export default {
       {
         path: '/config',
         name: '配置文件',
-        icon: <SettingOutlined />,
+        icon: <ControlOutlined />,
         component: '@/pages/config/index',
       },
       {
@@ -62,9 +62,9 @@ export default {
         component: '@/pages/log/index',
       },
       {
-        path: '/password',
-        name: '修改密码',
-        icon: <LockOutlined />,
+        path: '/setting',
+        name: '系统设置',
+        icon: <SettingOutlined />,
         component: '@/pages/password/index',
       },
     ],
@@ -72,8 +72,8 @@ export default {
   location: {
     pathname: '/',
   },
-  fixSiderbar: true,
   navTheme: 'light',
+  fixSiderbar: true,
   contentWidth: 'Fixed',
   splitMenus: false,
   logo: logo,

src/layouts/index.less

@@ -15,9 +15,10 @@ body {
 
 .ant-pro-grid-content.wide {
   max-width: unset;
-  height: calc(100vh - 72px);
   overflow: auto;
-  .ant-pro-page-container-children-content{
+  .ant-pro-page-container-children-content {
     overflow: auto;
+    min-height: calc(100vh - 96px);
+    background-color: #fff;
   }
 }

src/layouts/index.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Descriptions, Result, Avatar, Space, Statistic } from 'antd';
-import { LikeOutlined, UserOutlined } from '@ant-design/icons';
-import ProLayout, {
-  PageContainer,
-  PageLoading,
-  SettingDrawer,
-} from '@ant-design/pro-layout';
+import ProLayout from '@ant-design/pro-layout';
+import {
+  enable as enableDarkMode,
+  disable as disableDarkMode,
+  setFetchMethod,
+} from 'darkreader';
 import defaultProps from './defaultProps';
 import { Link, history } from 'umi';
 import config from '@/utils/config';
@@ -19,11 +18,26 @@ export default function (props: any) {
       history.push('/login');
     }
   }, []);
+
   useEffect(() => {
     if (props.location.pathname === '/') {
       history.push('/cookie');
     }
   }, [props.location.pathname]);
+
+  useEffect(() => {
+    const colorScheme =
+      window.matchMedia('(prefers-color-scheme: dark)').matches && 'dark';
+    const theme =
+      localStorage.getItem('qinglong_dark_theme') || colorScheme || 'light';
+    setFetchMethod(window.fetch);
+    if (theme === 'dark') {
+      enableDarkMode({ darkSchemeTextColor: '#fff' });
+    } else if (theme === 'light') {
+      disableDarkMode();
+    }
+  }, []);
+
   if (props.location.pathname === '/login') {
     return props.children;
   }
@@ -41,11 +55,6 @@ export default function (props: any) {
         }
         return <Link to={menuItemProps.path}>{defaultDom}</Link>;
       }}
-      //   rightContentRender={() => (
-      //       <div>
-      //           <Avatar shape="square" size="small" icon={<UserOutlined />} />
-      //       </div>
-      //   )}
       {...defaultProps}
     >
       {props.children}