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>
2025-01-24 10:33:50 +08:00 · 2023-10-31 16:40:08 +08:00 · 2023-10-31 16:40:08 +08:00 · e497721e9b
commit e497721e9b
parent ee8ec9eacf
5 changed files with 74 additions and 164 deletions
--- a/src/components/Application/src/AppDarkModeToggle.vue
+++ b/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:
-        transform 0.5s,
-        background-color 0.5s;
+      transition: transform 0.5s, background-color 0.5s;
      border-radius: 50%;
      background-color: #fff;
      will-change: transform;
--- a/src/design/color.less
+++ b/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);
--- a/src/logics/initAppConfig.ts
+++ b/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 {
-  updateTextColor,
-  updateBorderColor,
-  updateHeaderBgColor,
-  updateSidebarBgColor,
-  updateComponentBgColor,
-  updateAppContentBgColor,
-} from '/@/logics/theme/updateBackground';
+import { updateDarkTheme } from '/@/logics/theme/dark';
+import { updateHeaderBgColor, updateSidebarBgColor } 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();
--- a/src/logics/theme/dark.ts
+++ b/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');
 }
--- a/src/logics/theme/updateBackground.ts
+++ b/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,
-    },
-  });
-}