feat: theme color switch

CHANGELOG.zh_CN.md

@@ -3,6 +3,7 @@
 ### ✨ Features
 
 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string`
+- 新增主题色切换
 
 ### ⚡ Performance Improvements
 

build/config/lessModifyVars.ts

-/**
- * less global variable
- */
-const primaryColor = '#0084f4';
-// const primaryColor = '#018ffb';
-// const primaryColor = '#0065cc';
-//{
-const modifyVars = {
-  'primary-color': primaryColor, //  Global dominant color
-  'success-color': '#55D187', //  Success color
-  'error-color': '#ED6F6F', //  False color
-  'warning-color': '#EFBD47', //   Warning color
-  'link-color': primaryColor, //   Link color
-  'disabled-color': 'rgba(0, 0, 0, 0.25)', //  Failure color
-  'heading-color': 'rgba(0, 0, 0, 0.85)', //  Title color
-  'text-color': 'rgba(0, 0, 0, 0.85)', //  Main text color
-  'text-color-secondary ': 'rgba(0, 0, 0, 0.45)', // Subtext color
-  'font-size-base': '14px', //  Main font size
-  'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
-  'border-color-base': '#d9d9d9', //  Border color,
-  'border-radius-base': '2px', //  Component/float fillet
-};
-//}
-
-export { modifyVars, primaryColor };

build/config/themeConfig.ts

+import { generate } from '@ant-design/colors';
+export const primaryColor = '#0084f4';
+
+export const themeMode = 'light';
+
+export type ThemeMode = 'dark' | 'light';
+
+type Fn = (...arg: any) => any;
+
+export interface GenerateColorsParams {
+  mixLighten: Fn;
+  mixDarken: Fn;
+  tinycolor: any;
+  color?: string;
+}
+
+export function generateAntColors(color: string, mode: ThemeMode) {
+  return generate(color, {
+    theme: mode == 'dark' ? 'dark' : 'default',
+  });
+}
+
+export function getThemeColors(color?: string, theme?: ThemeMode) {
+  const tc = color || primaryColor;
+  const tm = theme || themeMode;
+  const colors = generateAntColors(tc, tm);
+  const primary = colors[5];
+  const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');
+
+  return [...colors, ...modeColors];
+}
+
+export function generateColors({
+  color = primaryColor,
+  mixLighten,
+  mixDarken,
+  tinycolor,
+}: GenerateColorsParams) {
+  const lightens = new Array(19).fill(0).map((t, i) => {
+    return mixLighten(color, i / 5);
+  });
+
+  const darkens = new Array(19).fill(0).map((t, i) => {
+    return mixDarken(color, i / 5);
+  });
+
+  const alphaColors = new Array(19).fill(0).map((t, i) => {
+    return tinycolor(color)
+      .setAlpha(i / 20)
+      .toRgbString();
+  });
+
+  const tinycolorLightens = new Array(19)
+    .fill(0)
+    .map((t, i) => {
+      return tinycolor(color)
+        .lighten(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#ffffff');
+
+  const tinycolorDarkens = new Array(19)
+    .fill(0)
+    .map((t, i) => {
+      return tinycolor(color)
+        .darken(i * 5)
+        .toHexString();
+    })
+    .filter((item) => item !== '#000000');
+  return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
+}
+
+/**
+ * less global variable
+ */
+export function generateModifyVars() {
+  const palettes = generateAntColors(primaryColor, themeMode);
+  const primary = palettes[5];
+
+  const primaryColorObj: Record<string, string> = {};
+
+  for (let index = 0; index < 10; index++) {
+    primaryColorObj[`primary-${index}`] = palettes[index];
+  }
+
+  return {
+    'primary-color': primary,
+    ...primaryColorObj,
+    'info-color': primary,
+    'alert-info-bg-color': palettes[0],
+    'alert-info-border-color': palettes[2],
+    'processing-color': primary,
+    'success-color': '#55D187', //  Success color
+    'error-color': '#ED6F6F', //  False color
+    'warning-color': '#EFBD47', //   Warning color
+    'disabled-color': 'rgba(0, 0, 0, 0.25)', //  Failure color
+    'heading-color': 'rgba(0, 0, 0, 0.85)', //  Title color
+    'text-color': 'rgba(0, 0, 0, 0.85)', //  Main text color
+    'text-color-secondary ': 'rgba(0, 0, 0, 0.45)', // Subtext color
+    'font-size-base': '14px', //  Main font size
+    'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', //  Floating shadow
+    'border-color-base': '#d9d9d9', //  Border color,
+    'border-radius-base': '2px', //  Component/float fillet
+    'link-color': primary, //   Link color
+  };
+}

build/vite/plugin/index.ts

@@ -9,8 +9,9 @@ import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configGzipPlugin } from './gzip';
-import { configStyleImportConfig } from './styleImport';
+import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
+import { configThemePlugin } from './theme';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
@@ -29,7 +30,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   vitePlugins.push(PurgeIcons());
 
   // vite-plugin-style-import
-  vitePlugins.push(configStyleImportConfig());
+  vitePlugins.push(configStyleImportPlugin());
 
   // rollup-plugin-gzip
   vitePlugins.push(configGzipPlugin(isBuild));
@@ -37,5 +38,8 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());
 
+  //vite-plugin-theme
+  vitePlugins.push(configThemePlugin());
+
   return vitePlugins;
 }

build/vite/plugin/styleImport.ts

 import styleImport from 'vite-plugin-style-import';
 
-export function configStyleImportConfig() {
+export function configStyleImportPlugin() {
   const pwaPlugin = styleImport({
     libs: [
       {

build/vite/plugin/theme.ts

+import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
+import { getThemeColors, generateColors } from '../../config/themeConfig';
+
+export function configThemePlugin() {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+  });
+
+  const plugin = viteThemePlugin({
+    colorVariables: [...getThemeColors(), ...colors],
+  });
+  return plugin;
+}

package.json

@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.6",
-    "@vueuse/core": "^4.0.11",
+    "@vueuse/core": "^4.0.12",
     "ant-design-vue": "2.0.0-rc.9",
-    "apexcharts": "^3.23.1",
+    "apexcharts": "^3.24.0",
     "axios": "^0.21.1",
     "crypto-es": "^1.2.6",
     "echarts": "^4.9.0",
@@ -33,12 +33,12 @@
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
-    "vditor": "^3.7.7",
+    "vditor": "^3.8.0",
     "vue": "^3.0.5",
     "vue-i18n": "9.0.0-rc.2",
     "vue-router": "^4.0.3",
-    "vue-types": "^3.0.1",
-    "vuex": "^4.0.0-rc.2",
+    "vue-types": "^3.0.2",
+    "vuex": "^4.0.0",
     "vuex-module-decorators": "^1.0.1",
     "xlsx": "^0.16.9",
     "zxcvbn": "^4.4.2"
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.294",
+    "@iconify/json": "^1.1.296",
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.6.0",
     "@types/echarts": "^4.9.3",
@@ -61,10 +61,10 @@
     "@types/sortablejs": "^1.10.6",
     "@types/yargs": "^16.0.0",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "@vitejs/plugin-legacy": "^1.2.2",
-    "@vitejs/plugin-vue": "^1.1.3",
+    "@typescript-eslint/eslint-plugin": "^4.14.2",
+    "@typescript-eslint/parser": "^4.14.2",
+    "@vitejs/plugin-legacy": "^1.2.3",
+    "@vitejs/plugin-vue": "^1.1.4",
     "@vitejs/plugin-vue-jsx": "^1.0.2",
     "@vue/compiler-sfc": "^3.0.5",
     "@vuedx/typecheck": "^0.6.3",
@@ -74,14 +74,14 @@
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
-    "eslint": "^7.18.0",
+    "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.5.0",
-    "esno": "^0.4.0",
+    "esno": "^0.4.3",
     "fs-extra": "^9.1.0",
     "husky": "^4.3.8",
-    "less": "^4.1.0",
+    "less": "^4.1.1",
     "lint-staged": "^10.5.3",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
@@ -93,12 +93,13 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.3",
-    "vite": "2.0.0-beta.59",
+    "vite": "2.0.0-beta.62",
     "vite-plugin-html": "^2.0.0-rc.3",
     "vite-plugin-mock": "^2.0.0-rc.2",
     "vite-plugin-purge-icons": "^0.6.0",
-    "vite-plugin-pwa": "^0.4.1",
+    "vite-plugin-pwa": "^0.4.2",
     "vite-plugin-style-import": "^0.5.5",
+    "vite-plugin-theme": "0.3.2",
     "vue-eslint-parser": "^7.4.1",
     "yargs": "^16.2.0"
   },
@@ -118,6 +119,6 @@
     }
   },
   "engines": {
-    "node": ">=10.16.1"
+    "node": "^12 || ^14"
   }
 }

src/design/ant/btn.less

@@ -22,7 +22,7 @@
 
     &:hover,
     &:focus {
-      color: @white;
+      color: @white !important;
       background-color: @button-primary-hover-color;
     }
 

src/hooks/setting/useRootSetting.ts

@@ -34,6 +34,8 @@ const getShowFooter = computed(() => unref(getRootSetting).showFooter);
 
 const getShowBreadCrumb = computed(() => unref(getRootSetting).showBreadCrumb);
 
+const getThemeColor = computed(() => unref(getRootSetting).themeColor);
+
 const getShowBreadCrumbIcon = computed(() => unref(getRootSetting).showBreadCrumbIcon);
 
 const getFullContent = computed(() => unref(getRootSetting).fullContent);
@@ -74,5 +76,6 @@ export function useRootSetting() {
     getShowFooter,
     getContentMode,
     getLockTime,
+    getThemeColor,
   };
 }

src/layouts/default/setting/SettingDrawer.tsx

@@ -31,7 +31,11 @@ import {
   mixSidebarTriggerOptions,
 } from './enum';
 
-import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+import {
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+  APP_PRESET_COLOR_LIST,
+} from '/@/settings/designSetting';
 
 const { t } = useI18n();
 
@@ -48,6 +52,7 @@ export default defineComponent({
       getColorWeak,
       getGrayMode,
       getLockTime,
+      getThemeColor,
     } = useRootSetting();
 
     const {
@@ -129,6 +134,16 @@ export default defineComponent({
       );
     }
 
+    function renderMainTheme() {
+      return (
+        <ThemePicker
+          colorList={APP_PRESET_COLOR_LIST}
+          def={unref(getThemeColor)}
+          event={HandlerEnum.CHANGE_THEME_COLOR}
+        />
+      );
+    }
+
     /**
      * @description:
      */
@@ -391,6 +406,8 @@ export default defineComponent({
       >
         <Divider>{() => t('layout.setting.navMode')}</Divider>
         {renderSidebar()}
+        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
+        {renderMainTheme()}
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>
         {renderHeaderTheme()}
         <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>

src/layouts/default/setting/components/SettingFooter.vue

@@ -27,7 +27,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { updateColorWeak, updateGrayMode } from '/@/logics/theme';
+  import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+  import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
 
   export default defineComponent({
     name: 'SettingFooter',

src/layouts/default/setting/enum.ts

@@ -13,6 +13,7 @@ const { t } = useI18n();
 
 export enum HandlerEnum {
   CHANGE_LAYOUT,
+  CHANGE_THEME_COLOR,
   // menu
   MENU_HAS_DRAG,
   MENU_ACCORDION,

src/layouts/default/setting/handler.ts

 import { HandlerEnum } from './enum';
-import {
-  updateColorWeak,
-  updateGrayMode,
-  updateHeaderBgColor,
-  updateSidebarBgColor,
-} from '/@/logics/theme';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+
 import { appStore } from '/@/store/modules/app';
 import { ProjectConfig } from '/@/types/config';
+import { changeTheme } from '/@/logics/theme';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
 export function baseHandler(event: HandlerEnum, value: any) {
   const config = handler(event, value);
@@ -14,6 +14,7 @@ export function baseHandler(event: HandlerEnum, value: any) {
 }
 
 export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
+  const { getThemeColor } = useRootSetting();
   switch (event) {
     case HandlerEnum.CHANGE_LAYOUT:
       const { mode, type, split } = value;
@@ -30,6 +31,13 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
         },
       };
 
+    case HandlerEnum.CHANGE_THEME_COLOR:
+      if (getThemeColor.value === value) {
+        return {};
+      }
+      changeTheme(value);
+      return { themeColor: value };
+
     case HandlerEnum.MENU_HAS_DRAG:
       return { menuSetting: { canDrag: value } };
 

src/locales/lang/en/layout/setting.ts

@@ -37,6 +37,7 @@ export default {
   splitMenu: 'Split menu',
   closeMixSidebarOnChange: 'Switch page to close menu',
 
+  sysTheme: 'System theme',
   headerTheme: 'Header theme',
   sidebarTheme: 'Menu theme',
 

src/locales/lang/zh_CN/layout/setting.ts

@@ -36,6 +36,7 @@ export default {
   splitMenu: '分割菜单',
   closeMixSidebarOnChange: '切换页面关闭菜单',
 
+  sysTheme: '系统主题',
   headerTheme: '顶栏主题',
   sidebarTheme: '菜单主题',
 

src/logics/initAppConfig.ts

@@ -8,15 +8,14 @@ import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 
 import projectSetting from '/@/settings/projectSetting';
 import { getLocal } from '/@/utils/helper/persistent';
-import {
-  updateGrayMode,
-  updateColorWeak,
-  updateHeaderBgColor,
-  updateSidebarBgColor,
-} from '/@/logics/theme';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+import { changeTheme } from '/@/logics/theme';
 
 import { appStore } from '/@/store/modules/app';
 import { deepMerge } from '/@/utils';
+import { primaryColor } from '../../build/config/themeConfig';
 
 // Initial project configuration
 export function initAppConfigStore() {
@@ -26,16 +25,13 @@ export function initAppConfigStore() {
     const {
       colorWeak,
       grayMode,
+      themeColor,
       headerSetting: { bgColor: headerBgColor } = {},
       menuSetting: { bgColor } = {},
     } = projCfg;
-    // if (
-    //   themeColor !== primaryColor &&
-    //   themeColor &&
-    //   process.env.VUE_APP_USE_THEME_REPLACER !== 'TRUE'
-    // ) {
-    //   updateTheme(themeColor);
-    // }
+    if (themeColor && themeColor !== primaryColor) {
+      changeTheme(themeColor);
+    }
     headerBgColor && updateHeaderBgColor(headerBgColor);
     bgColor && updateSidebarBgColor(bgColor);
     grayMode && updateGrayMode(grayMode);

src/logics/theme/index.ts

-import { isHexColor, colorIsDark, lighten, darken } from '/@/utils/color';
-import { appStore } from '/@/store/modules/app';
-import { ThemeEnum } from '/@/enums/appEnum';
+import { getThemeColors, ThemeMode, generateColors } from '../../../build/config/themeConfig';
 
-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';
+import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
+import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';
 
-const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
-const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
-const SIDER_LIGHTEN_1_BG_COLOR = '--sider-dark-lighten-1-bg-color';
-const SIDER_LIGHTEN_2_BG_COLOR = '--sider-dark-lighten-2-bg-color';
-
-export function setCssVar(prop: string, val: any, dom = document.documentElement) {
-  dom.style.setProperty(prop, val);
-}
-
-function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
-  const targetEl = target || document.body;
-  let { className } = targetEl;
-  className = className.replace(clsName, '');
-  targetEl.className = flag ? `${className} ${clsName} ` : className;
-}
-
-/**
- * Change the status of the project's color weakness mode
- * @param colorWeak
- */
-export const updateColorWeak = (colorWeak: boolean) => {
-  toggleClass(colorWeak, 'color-weak', document.documentElement);
-};
-
-/**
- * Change project gray mode status
- * @param gray
- */
-export const updateGrayMode = (gray: boolean) => {
-  toggleClass(gray, 'gray-mode', document.documentElement);
-};
-
-/**
- * Change the background color of the top header
- * @param color
- */
-export function updateHeaderBgColor(color: string) {
-  if (!isHexColor(color)) return;
-  // bg color
-  setCssVar(HEADER_BG_COLOR_VAR, color);
-
-  // hover color
-  const hoverColor = lighten(color, 6);
-  setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
-  setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
-
-  // Determine the depth of the color value and automatically switch the theme
-  const isDark = colorIsDark(color);
-
-  appStore.commitProjectConfigState({
-    headerSetting: {
-      theme: isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT,
-    },
+export async function changeTheme(color: string, theme?: ThemeMode) {
+  const colors = generateColors({
+    mixDarken,
+    mixLighten,
+    tinycolor,
+    color,
   });
-}
-
-/**
- * Change the background color of the left menu
- * @param color  bg color
- */
-export function updateSidebarBgColor(color: string) {
-  if (!isHexColor(color)) return;
-
-  setCssVar(SIDER_DARK_BG_COLOR, color);
-  setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6));
-  setCssVar(SIDER_LIGHTEN_1_BG_COLOR, lighten(color, 5));
-  setCssVar(SIDER_LIGHTEN_2_BG_COLOR, lighten(color, 8));
-
-  // 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.commitProjectConfigState({
-    menuSetting: {
-      theme: isLight ? ThemeEnum.LIGHT : ThemeEnum.DARK,
-    },
+  return await replaceStyleVariables({
+    colorVariables: [...getThemeColors(color, theme), ...colors],
   });
 }

src/logics/theme/updateBackground.ts

+import { isHexColor, colorIsDark, lighten, darken } from '/@/utils/color';
+import { appStore } from '/@/store/modules/app';
+import { ThemeEnum } from '/@/enums/appEnum';
+import { setCssVar } from './util';
+
+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';
+
+const SIDER_DARK_BG_COLOR = '--sider-dark-bg-color';
+const SIDER_DARK_DARKEN_BG_COLOR = '--sider-dark-darken-bg-color';
+const SIDER_LIGHTEN_1_BG_COLOR = '--sider-dark-lighten-1-bg-color';
+const SIDER_LIGHTEN_2_BG_COLOR = '--sider-dark-lighten-2-bg-color';
+
+/**
+ * Change the background color of the top header
+ * @param color
+ */
+export function updateHeaderBgColor(color: string) {
+  if (!isHexColor(color)) return;
+  // bg color
+  setCssVar(HEADER_BG_COLOR_VAR, color);
+
+  // hover color
+  const hoverColor = lighten(color, 6);
+  setCssVar(HEADER_BG_HOVER_COLOR_VAR, hoverColor);
+  setCssVar(HEADER_MENU_ACTIVE_BG_COLOR_VAR, hoverColor);
+
+  // Determine the depth of the color value and automatically switch the theme
+  const isDark = colorIsDark(color);
+
+  appStore.commitProjectConfigState({
+    headerSetting: {
+      theme: isDark ? ThemeEnum.DARK : ThemeEnum.LIGHT,
+    },
+  });
+}
+
+/**
+ * Change the background color of the left menu
+ * @param color  bg color
+ */
+export function updateSidebarBgColor(color: string) {
+  if (!isHexColor(color)) return;
+
+  setCssVar(SIDER_DARK_BG_COLOR, color);
+  setCssVar(SIDER_DARK_DARKEN_BG_COLOR, darken(color, 6));
+  setCssVar(SIDER_LIGHTEN_1_BG_COLOR, lighten(color, 5));
+  setCssVar(SIDER_LIGHTEN_2_BG_COLOR, lighten(color, 8));
+
+  // 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.commitProjectConfigState({
+    menuSetting: {
+      theme: isLight ? ThemeEnum.LIGHT : ThemeEnum.DARK,
+    },
+  });
+}

src/logics/theme/updateColorWeak.ts

+import { toggleClass } from './util';
+
+/**
+ * Change the status of the project's color weakness mode
+ * @param colorWeak
+ */
+export function updateColorWeak(colorWeak: boolean) {
+  toggleClass(colorWeak, 'color-weak', document.documentElement);
+}

src/logics/theme/updateGrayMode.ts

+import { toggleClass } from './util';
+
+/**
+ * Change project gray mode status
+ * @param gray
+ */
+export function updateGrayMode(gray: boolean) {
+  toggleClass(gray, 'gray-mode', document.documentElement);
+}

src/logics/theme/util.ts

+const docEle = document.documentElement;
+export function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
+  const targetEl = target || document.body;
+  let { className } = targetEl;
+  className = className.replace(clsName, '');
+  targetEl.className = flag ? `${className} ${clsName} ` : className;
+}
+
+export function setCssVar(prop: string, val: any, dom = docEle) {
+  dom.style.setProperty(prop, val);
+}

src/settings/designSetting.ts

@@ -3,14 +3,24 @@ export default {
 };
 
 // header preset color
+export const APP_PRESET_COLOR_LIST: string[] = [
+  '#0084f4',
+  '#009688',
+  '#536dfe',
+  '#ff5c93',
+  '#ee4f12',
+  '#0096c7',
+  '#9c27b0',
+  '#ff9800',
+];
+
+// header preset color
 export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
   '#ffffff',
   '#009688',
   '#5172DC',
-  '#1E9FFF',
   '#018ffb',
   '#409eff',
-  '#4e73df',
   '#e74c3c',
   '#24292e',
   '#394664',

src/settings/projectSetting.ts

@@ -3,7 +3,7 @@ import type { ProjectConfig } from '/@/types/config';
 import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '/@/enums/menuEnum';
 import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
-import { primaryColor } from '../../build/config/lessModifyVars';
+import { primaryColor, themeMode } from '../../build/config/themeConfig';
 import { isProdMode } from '/@/utils/env';
 
 // ! You need to clear the browser cache after the change
@@ -20,6 +20,8 @@ const setting: ProjectConfig = {
   // color
   // TODO Theme color
   themeColor: primaryColor,
+  // TODO dark theme
+  themeMode: themeMode,
 
   // Website gray mode, open for possible mourning dates
   grayMode: false,

src/types/config.d.ts

@@ -2,6 +2,7 @@ import { MenuTypeEnum, MenuModeEnum, TriggerEnum, MixSidebarTriggerEnum } from '
 import { ContentEnum, PermissionModeEnum, ThemeEnum, RouterTransitionEnum } from '/@/enums/appEnum';
 import { CacheTypeEnum } from '/@/enums/cacheEnum';
 import type { LocaleType } from '/@/locales/types';
+import { ThemeMode } from '../../build/config/lessModifyVars';
 
 export interface MenuSetting {
   bgColor: string;
@@ -95,6 +96,7 @@ export interface ProjectConfig {
   colorWeak: boolean;
   // 主题色
   themeColor: string;
+  themeMode: ThemeMode;
   // 全屏显示主界面,不显示菜单,及顶部
   fullContent: boolean;
   // 区域宽度

src/types/vue-app-env.d.ts

@@ -3,3 +3,23 @@ declare module '*.vue' {
   const Component: ReturnType<typeof defineComponent>;
   export default Component;
 }
+
+import type { ComponentRenderProxy, VNode } from 'vue';
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode;
+    // tslint:disable no-empty-interface
+    type ElementClass = ComponentRenderProxy;
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}

vite.config.ts

@@ -6,7 +6,7 @@ import legacy from '@vitejs/plugin-legacy';
 
 import { loadEnv } from 'vite';
 
-import { modifyVars } from './build/config/lessModifyVars';
+import { generateModifyVars } from './build/config/themeConfig';
 import { createProxy } from './build/vite/proxy';
 
 import { wrapperEnv } from './build/utils';
@@ -67,7 +67,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           modifyVars: {
             // reference:  Avoid repeated references
             hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
-            ...modifyVars,
+            ...generateModifyVars(),
           },
           javascriptEnabled: true,
         },