From b008c44246bec32def74c6ae1dd3522bf8c1ca2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=97=E5=A4=A7?= <454690789@qq.com>
Date: Mon, 18 Dec 2023 21:15:23 +0800
Subject: [PATCH] =?UTF-8?q?perf(darkMode):=20=E6=B7=B1=E8=89=B2=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E9=A2=9C=E8=89=B2=E5=AE=9A=E4=B9=89=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=96=B9=E5=BC=8F=E4=BC=98=E5=8C=96=20(#3436?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf(darkMode): 深色模式颜色定义以及切换方式优化

* perf: text-color rgb->rgba

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
---
 src/design/color.less    | 20 ++++++++++++++++++-
 src/design/index.less    |  5 +++--
 src/logics/theme/dark.ts | 42 ----------------------------------------
 3 files changed, 22 insertions(+), 45 deletions(-)

diff --git a/src/design/color.less b/src/design/color.less
index 0ca715cd..90d3db41 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -1,6 +1,6 @@
 html {
   // text
-  --text-color: rgba(0 0 0 85%);
+  --text-color: rgba(0 0 0 / 85%);
 
   // border
   --border-color: #eee;
@@ -23,6 +23,24 @@ html {
 
   // custom color example
   --custom-example-color: #ff4d4f;
+
+  // dark theme
+  &[data-theme='dark'] {
+    // text
+    --text-color: #c9d1d9;
+
+    // border
+    --border-color: #303030;
+
+    // component
+    --component-background-color: #151515;
+
+    // app
+    --app-content-background-color: #1e1e1e;
+
+    // custom color example
+    --custom-example-color: #55d187;
+  }
 }
 
 @white: #fff;
diff --git a/src/design/index.less b/src/design/index.less
index 138a4354..98a63d04 100644
--- a/src/design/index.less
+++ b/src/design/index.less
@@ -1,9 +1,10 @@
+@import 'color.less';
 @import 'transition/index.less';
 @import 'var/index.less';
 @import 'public.less';
 @import 'ant/index.less';
-@import './theme.less';
-@import './entry.css';
+@import 'theme.less';
+@import 'entry.css';
 
 input:-webkit-autofill {
   box-shadow: 0 0 0 1000px transparent inset;
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index 5abdc9f7..4d751cfd 100644
--- a/src/logics/theme/dark.ts
+++ b/src/logics/theme/dark.ts
@@ -1,4 +1,3 @@
-import { setCssVar } from './util';
 import { addClass, hasClass, removeClass } from '@/utils/domUtils';
 
 export type CustomColorType = {
@@ -7,46 +6,6 @@ export type CustomColorType = {
   dark: string;
 };
 
-/**
- * 自定义颜色列表
- * 需先在 src/design/color.less 内定义变量和 light 颜色
- */
-export const customColorList: CustomColorType[] = [
-  {
-    name: '--text-color',
-    light: 'rgba(0, 0, 0, 0.85)',
-    dark: '#c9d1d9',
-  },
-  {
-    name: '--border-color',
-    light: '#eee',
-    dark: '#303030',
-  },
-  {
-    name: '--component-background-color',
-    light: '#fff',
-    dark: '#151515',
-  },
-  {
-    name: '--app-content-background-color',
-    light: '#fafafa',
-    dark: '#1e1e1e',
-  },
-  // custom example
-  {
-    name: '--custom-example-color',
-    light: '#ff4d4f',
-    dark: '#55D187',
-  },
-];
-
-// 根据主题更新自定义颜色
-export function updateCustomColor(mode: 'light' | 'dark') {
-  customColorList.forEach((item) => {
-    setCssVar(item.name, item[mode]);
-  });
-}
-
 export async function updateDarkTheme(mode: string | null = 'light') {
   const htmlRoot = document.getElementById('htmlRoot');
   if (!htmlRoot) {
@@ -64,5 +23,4 @@ export async function updateDarkTheme(mode: string | null = 'light') {
       removeClass(htmlRoot, 'dark');
     }
   }
-  updateCustomColor(mode === 'dark' ? 'dark' : 'light');
 }