perf: theme

src/layout/components/setting/index.vue

@@ -21,6 +21,7 @@ import { debounce } from "/@/utils/debounce";
 import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { shadeBgColor } from "../../theme/element-plus";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
@@ -29,6 +30,7 @@ import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-
 
 const router = useRouter();
 const { isSelect } = useCssModule();
+const body = document.documentElement as HTMLElement;
 const instance =
   getCurrentInstance().appContext.app.config.globalProperties.$storage;
 
@@ -260,13 +262,13 @@ function setLayoutThemeColor(theme: string) {
 const setEpThemeColor = (color: string) => {
   writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
+  body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
 };
 
 let dataTheme = ref<boolean>(instance.layout.darkMode);
 
 // 日间、夜间主题切换
 function dataThemeChange() {
-  const body = document.documentElement as HTMLElement;
   if (dataTheme.value) {
     body.setAttribute("data-theme", "dark");
     setLayoutThemeColor("light");

src/layout/theme/element-plus.ts

@@ -1,6 +1,7 @@
 /* 动态改变element-plus主题色 */
 import rgbHex from "rgb-hex";
 import color from "css-color-function";
+import { TinyColor } from "@ctrl/tinycolor";
 import epCss from "element-plus/dist/index.css";
 
 // 色值表
@@ -72,3 +73,8 @@ const getStyleTemplate = (data: string): string => {
   });
   return data;
 };
+
+// 自动计算hover和active颜色 https://element-plus.gitee.io/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2-%E6%B5%8B%E8%AF%95%E7%89%88
+export const shadeBgColor = (color: string): string => {
+  return new TinyColor(color).shade(10).toString();
+};