feat: ep theme (#156)

* feat: ep-theme

* perf: ep-theme

Co-authored-by: lrl <742798240@qq.com>

src/layout/components/setting/index.vue

@@ -9,6 +9,8 @@ import {
   useCssModule,
   getCurrentInstance
 } from "vue";
+import rgbHex from "rgb-hex";
+import { find } from "lodash-es";
 import panel from "../panel/index.vue";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
@@ -19,8 +21,10 @@ import { debounce } from "/@/utils/debounce";
 import darkIcon from "/@/assets/svg/dark.svg";
 import { themeColorsType } from "../../types";
 import { useAppStoreHook } from "/@/store/modules/app";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
+import { createNewStyle, writeNewStyle } from "/@/utils/theme";
 import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
 
 const router = useRouter();
@@ -77,6 +81,8 @@ const markValue = ref(storageLocal.getItem("showModel") || "smart");
 
 const logoVal = ref(storageLocal.getItem("logoVal") || "1");
 
+const epThemeColor = ref(useEpThemeStoreHook().getEpThemeColor);
+
 const settings = reactive({
   greyVal: instance.sets.grey,
   weakVal: instance.sets.weak,
@@ -146,6 +152,8 @@ nextTick(() => {
   settings.weakVal &&
     document.querySelector("html")?.setAttribute("class", "html-weakness");
   settings.tabsVal && tagsChange();
+
+  writeNewStyle(createNewStyle(epThemeColor.value));
 });
 
 // 清空缓存并返回登录页
@@ -167,6 +175,7 @@ function onReset() {
     }
   ]);
   useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
+  useEpThemeStoreHook().setEpThemeColor("#409EFF");
   router.push("/login");
 }
 
@@ -236,8 +245,22 @@ function setLayoutThemeColor(theme: string) {
     scopeName: `layout-theme-${theme}`
   });
   instance.layout = { layout: useAppStoreHook().layout, theme };
+
+  if (theme === "default" || theme === "light") {
+    setEpThemeColor("#409EFF");
+  } else {
+    const colors = find(themeColors.value, { themeColor: theme });
+    const color = "#" + rgbHex(colors.rgb);
+    setEpThemeColor(color);
+  }
 }
 
+// 设置ep主题色
+const setEpThemeColor = (color: string) => {
+  writeNewStyle(createNewStyle(color));
+  useEpThemeStoreHook().setEpThemeColor(color);
+};
+
 let dataTheme = ref<boolean>(false);
 
 // 日间、夜间主题切换

src/plugins/element-plus/index.ts

@@ -44,6 +44,7 @@ import {
   ElCollapse,
   ElCollapseItem,
   ElTreeV2,
+  ElColorPicker,
   // 指令
   ElLoading,
   ElInfiniteScroll
@@ -96,7 +97,8 @@ const components = [
   ElEmpty,
   ElCollapse,
   ElCollapseItem,
-  ElTreeV2
+  ElTreeV2,
+  ElColorPicker
 ];
 
 // https://element-plus.org/zh-CN/component/icon.html

src/store/modules/epTheme.ts

@@ -0,0 +1,25 @@
+import { store } from "/@/store";
+import { defineStore } from "pinia";
+import { storageLocal } from "/@/utils/storage";
+
+export const useEpThemeStore = defineStore({
+  id: "pure-epTheme",
+  state: () => ({
+    epThemeColor: storageLocal.getItem("epThemeColor") || "#409EFF"
+  }),
+  getters: {
+    getEpThemeColor() {
+      return this.epThemeColor;
+    }
+  },
+  actions: {
+    setEpThemeColor(newColor) {
+      this.epThemeColor = newColor;
+      storageLocal.setItem("epThemeColor", newColor);
+    }
+  }
+});
+
+export function useEpThemeStoreHook() {
+  return useEpThemeStore(store);
+}

src/utils/theme/index.ts

@@ -0,0 +1,71 @@
+import rgbHex from "rgb-hex";
+import color from "css-color-function";
+import epCss from "element-plus/dist/index.css";
+
+const formula = {
+  "shade-1": "color(primary shade(10%))",
+  "light-1": "color(primary tint(10%))",
+  "light-2": "color(primary tint(20%))",
+  "light-3": "color(primary tint(30%))",
+  "light-4": "color(primary tint(40%))",
+  "light-5": "color(primary tint(50%))",
+  "light-6": "color(primary tint(60%))",
+  "light-7": "color(primary tint(70%))",
+  "light-8": "color(primary tint(80%))",
+  "light-9": "color(primary tint(90%))"
+};
+
+export const writeNewStyle = newStyle => {
+  const style = window.document.createElement("style");
+  style.innerText = newStyle;
+  window.document.head.appendChild(style);
+};
+
+export const createNewStyle = primaryStyle => {
+  const colors = createColors(primaryStyle);
+  let cssText = getOriginStyle();
+  Object.keys(colors).forEach(key => {
+    cssText = cssText.replace(
+      new RegExp("(:|\\s+)" + key, "g"),
+      "$1" + colors[key]
+    );
+  });
+  return cssText;
+};
+
+export const createColors = primary => {
+  if (!primary) return;
+  const colors = {
+    primary
+  };
+  Object.keys(formula).forEach(key => {
+    const value = formula[key].replace(/primary/, primary);
+    colors[key] = "#" + rgbHex(color.convert(value));
+  });
+  return colors;
+};
+
+export const getOriginStyle = () => {
+  return getStyleTemplate(epCss);
+};
+
+const getStyleTemplate = data => {
+  const colorMap = {
+    "#3a8ee6": "shade-1",
+    "#409eff": "primary",
+    "#53a8ff": "light-1",
+    "#66b1ff": "light-2",
+    "#79bbff": "light-3",
+    "#8cc5ff": "light-4",
+    "#a0cfff": "light-5",
+    "#b3d8ff": "light-6",
+    "#c6e2ff": "light-7",
+    "#d9ecff": "light-8",
+    "#ecf5ff": "light-9"
+  };
+  Object.keys(colorMap).forEach(key => {
+    const value = colorMap[key];
+    data = data.replace(new RegExp(key, "ig"), value);
+  });
+  return data;
+};