perf(darkMode): 优化深色模式颜色切换相关方法; 增加根据主题更新自定义颜色方法和示例 (#3216)

* perf(darkMode): 优化深色模式颜色切换相关方法; 增加根据主题更新自定义颜色方法和示例

* revert: 撤销notify组件的样式修改测试

* chore: color pattern error

* chore(theme): remove dead code

---------

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
Co-authored-by: invalid w <wangjuesix@gmail.com>

src/components/Application/src/AppDarkModeToggle.vue

@@ -8,18 +8,11 @@
 <script lang="ts" setup>
   import { computed, unref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import {
-    updateTextColor,
-    updateBorderColor,
-    updateHeaderBgColor,
-    updateSidebarBgColor,
-    updateComponentBgColor,
-    updateAppContentBgColor,
-  } from '/@/logics/theme/updateBackground';
-  import { updateDarkTheme } from '/@/logics/theme/dark';
   import { ThemeEnum } from '/@/enums/appEnum';
+  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { updateDarkTheme } from '/@/logics/theme/dark';
+  import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
 
   const { prefixCls } = useDesign('dark-switch');
   const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
@@ -37,12 +30,8 @@
     const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
     setDarkMode(darkMode);
     updateDarkTheme(darkMode);
-    updateTextColor();
-    updateBorderColor();
     updateHeaderBgColor();
     updateSidebarBgColor();
-    updateComponentBgColor();
-    updateAppContentBgColor();
   }
 </script>
 <style lang="less" scoped>
@@ -72,9 +61,7 @@
       z-index: 1;
       width: 18px;
       height: 18px;
-      transition:
+      transition: transform 0.5s, background-color 0.5s;
-        transform 0.5s,
-        background-color 0.5s;
       border-radius: 50%;
       background-color: #fff;
       will-change: transform;

src/design/color.less

@@ -1,6 +1,6 @@
 html {
   // text
-  --text-color: rgb(0 0 0 85%);
+  --text-color: rgba(0 0 0 85%);
 
   // border
   --border-color: #eee;
@@ -20,6 +20,9 @@ html {
 
   // app
   --app-content-background-color: #fafafa;
+
+  // custom color example
+  --custom-example-color: #ff4d4f;
 }
 
 @white: #fff;
@@ -40,7 +43,7 @@ html {
 @iconify-bg-color: #5551;
 
 // =================================
-// ==============border-color=======
+// =========border-color============
 // =================================
 
 // Dark-dark
@@ -53,7 +56,7 @@ html {
 @border-color-light: @border-color-base;
 
 // =================================
-// ==============message==============
+// ============message==============
 // =================================
 
 // success-bg-color
@@ -77,7 +80,7 @@ html {
 @top-menu-active-bg-color: var(--header-active-menu-bg-color);
 
 // =================================
-// ==============Menu============
+// ==============Menu===============
 // =================================
 
 // let -menu
@@ -90,7 +93,7 @@ html {
 @trigger-dark-bg-color: rgba(255, 255, 255, 0.1);
 
 // =================================
-// ==============tree============
+// ==============tree===============
 // =================================
 // tree item hover background
 @tree-hover-background-color: #f5f7fa;
@@ -98,20 +101,20 @@ html {
 @tree-hover-font-color: #f5f7fa;
 
 // =================================
-// ==============link============
+// ==============link===============
 // =================================
 @link-hover-color: @primary-color;
 @link-active-color: darken(@primary-color, 10%);
 
 // =================================
-// ==============Text color-=============
+// ===========Text color============
 // =================================
 
 // Main text color
 @text-color-base: var(--text-color);
 
 // =================================
-// ==============app content color-=============
+// =======app content color=========
 // =================================
 @app-content-background: var(--app-content-background-color);
 
@@ -122,7 +125,7 @@ html {
 @text-color-help-dark: #909399;
 
 // =================================
-// ==============breadcrumb=========
+// ============breadcrumb===========
 // =================================
 @breadcrumb-item-normal-color: #999;
 // =================================
@@ -158,3 +161,8 @@ html {
 @button-cancel-hover-color: @primary-color;
 @button-cancel-hover-bg-color: @white;
 @button-cancel-hover-border-color: @primary-color;
+
+// =================================
+// =====custom color example========
+// =================================
+@custom-example-color: var(--custom-example-color);

src/logics/initAppConfig.ts

@@ -6,26 +6,19 @@ import type { ProjectConfig } from '/#/config';
 import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
 
-import {
+import { updateDarkTheme } from '/@/logics/theme/dark';
-  updateTextColor,
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
-  updateBorderColor,
-  updateHeaderBgColor,
-  updateSidebarBgColor,
-  updateComponentBgColor,
-  updateAppContentBgColor,
-} from '/@/logics/theme/updateBackground';
 import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
 import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
-import { updateDarkTheme } from '/@/logics/theme/dark';
 
 import { useAppStore } from '/@/store/modules/app';
 import { useLocaleStore } from '/@/store/modules/locale';
 
 import { getCommonStoragePrefix, getStorageShortName } from '/@/utils/env';
 
-import { Persistent } from '/@/utils/cache/persistent';
-import { deepMerge } from '/@/utils';
 import { ThemeEnum } from '/@/enums/appEnum';
+import { deepMerge } from '/@/utils';
+import { Persistent } from '/@/utils/cache/persistent';
 
 // Initial project configuration
 export function initAppConfigStore() {
@@ -51,10 +44,6 @@ export function initAppConfigStore() {
 
   // init dark mode
   updateDarkTheme(darkMode);
-  updateTextColor();
-  updateBorderColor();
-  updateComponentBgColor();
-  updateAppContentBgColor();
   if (darkMode === ThemeEnum.DARK) {
     updateHeaderBgColor();
     updateSidebarBgColor();

src/logics/theme/dark.ts

@@ -1,5 +1,52 @@
+import { setCssVar } from './util';
 import { addClass, hasClass, removeClass } from '/@/utils/domUtils';
 
+export type CustomColorType = {
+  name: string;
+  light: string;
+  dark: string;
+};
+
+/**
+ * 自定义颜色列表
+ * 需先在 src/design/color.less 内定义变量和 light 颜色
+ */
+export const customColorList: CustomColorType[] = [
+  {
+    name: '--text-color',
+    light: 'rgb(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: '#151515',
+  },
+  // 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) {
@@ -17,4 +64,5 @@ export async function updateDarkTheme(mode: string | null = 'light') {
       removeClass(htmlRoot, 'dark');
     }
   }
+  updateCustomColor(mode === 'dark' ? 'dark' : 'light');
 }

src/logics/theme/updateBackground.ts

@@ -3,10 +3,6 @@ import { useAppStore } from '/@/store/modules/app';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { setCssVar } from './util';
 
-const TEXT_COLOR_VAR = '--text-color';
-
-const BORDER_COLOR_VAR = '--border-color';
-
 const HEADER_BG_COLOR_VAR = '--header-bg-color';
 const HEADER_BG_HOVER_COLOR_VAR = '--header-bg-hover-color';
 const HEADER_MENU_ACTIVE_BG_COLOR_VAR = '--header-active-menu-bg-color';
@@ -15,68 +11,6 @@ const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
 const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
 const SIDER_LIGHTEN_BG_COLOR = '--sider-dark-lighten-bg-color';
 
-const COMPONENT_BACKGROUND_COLOR = '--component-background-color';
-
-const APP_CONTENT_BACKGROUND_COLOR = '--app-content-background-color';
-
-/**
- * Change the text color of the html
- * @param color
- */
-export function updateTextColor(color?: string) {
-  const appStore = useAppStore();
-  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
-  if (!color) {
-    if (darkMode) {
-      color = '#c9d1d9';
-    } else {
-      color = 'rgb(0, 0, 0, 0.85)';
-    }
-  }
-
-  // text color
-  setCssVar(TEXT_COLOR_VAR, color);
-
-  // only #ffffff is light
-  // Only when the background color is #fff, the theme of the menu will be changed to light
-  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
-
-  appStore.setProjectConfig({
-    menuSetting: {
-      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
-    },
-  });
-}
-
-/**
- * Change the border color of the border
- * @param color
- */
-export function updateBorderColor(color?: string) {
-  const appStore = useAppStore();
-  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
-  if (!color) {
-    if (darkMode) {
-      color = '#303030';
-    } else {
-      color = '#eee';
-    }
-  }
-
-  // text color
-  setCssVar(BORDER_COLOR_VAR, color);
-
-  // only #ffffff is light
-  // Only when the background color is #fff, the theme of the menu will be changed to light
-  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
-
-  appStore.setProjectConfig({
-    menuSetting: {
-      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
-    },
-  });
-}
-
 /**
  * Change the background color of the top header
  * @param color
@@ -140,59 +74,3 @@ export function updateSidebarBgColor(color?: string) {
     },
   });
 }
-
-/**
- * Change the background color of the componet
- * @param color
- */
-export function updateComponentBgColor(color?: string) {
-  const appStore = useAppStore();
-  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
-  if (!color) {
-    if (darkMode) {
-      color = '#151515';
-    } else {
-      color = '#fff';
-    }
-  }
-  // component color
-  setCssVar(COMPONENT_BACKGROUND_COLOR, color);
-
-  // only #ffffff is light
-  // Only when the background color is #fff, the theme of the menu will be changed to light
-  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
-
-  appStore.setProjectConfig({
-    menuSetting: {
-      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
-    },
-  });
-}
-
-/**
- * Change the background color of the app content
- * @param color
- */
-export function updateAppContentBgColor(color?: string) {
-  const appStore = useAppStore();
-  const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
-  if (!color) {
-    if (darkMode) {
-      color = '#1e1e1e';
-    } else {
-      color = '#fafafa';
-    }
-  }
-  // app content color
-  setCssVar(APP_CONTENT_BACKGROUND_COLOR, color);
-
-  // only #ffffff is light
-  // Only when the background color is #fff, the theme of the menu will be changed to light
-  const isLight = ['#fff', '#ffffff'].includes(color!.toLowerCase());
-
-  appStore.setProjectConfig({
-    menuSetting: {
-      theme: isLight && !darkMode ? ThemeEnum.LIGHT : ThemeEnum.DARK,
-    },
-  });
-}