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

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

* perf: text-color rgb->rgba

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>

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;

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;

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');
 }