fix: 🐛 主题颜色设置覆盖暗黑模式下el-table行激活的背景色问题修复

package.json

@@ -47,6 +47,7 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "animate.css": "^4.1.1",
     "axios": "^1.6.8",
+    "color": "^4.2.3",
     "echarts": "^5.5.0",
     "element-plus": "^2.7.2",
     "lodash-es": "^4.17.21",
@@ -67,6 +68,7 @@
     "@commitlint/cli": "^18.6.1",
     "@commitlint/config-conventional": "^18.6.3",
     "@iconify-json/ep": "^1.1.15",
+    "@types/color": "^3.0.6",
     "@types/lodash": "^4.17.0",
     "@types/node": "^20.12.7",
     "@types/nprogress": "^0.2.3",

src/store/modules/settings.ts

@@ -1,7 +1,6 @@
 import defaultSettings from "@/settings";
-import { genMixColor } from "@/utils/color";
-import { setStyleProperty } from "@/utils";
 import { ThemeEnum } from "@/enums/ThemeEnum";
+import Color from "color";
 
 type SettingsValue = boolean | string;
 
@@ -47,14 +46,16 @@ export const useSettingsStore = defineStore("setting", () => {
       }
 
       if (newThemeColor !== oldThemeColor) {
-        const { DEFAULT, dark, light } = genMixColor(newThemeColor);
+        const rootStyle = document.documentElement.style;
-        setStyleProperty(`--el-color-primary`, DEFAULT);
+        rootStyle.setProperty(`--el-color-primary`, newThemeColor);
-        setStyleProperty(`--el-color-primary-dark-2`, dark[2]);
+        rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor);
-        setStyleProperty(`--el-color-primary-light-3`, light[3]);
+
-        setStyleProperty(`--el-color-primary-light-5`, light[5]);
+        for (let i = 1; i < 10; i++) {
-        setStyleProperty(`--el-color-primary-light-7`, light[7]);
+          rootStyle.setProperty(
-        setStyleProperty(`--el-color-primary-light-8`, light[8]);
+            `--el-color-primary-light-${i}`,
-        setStyleProperty(`--el-color-primary-light-9`, light[9]);
+            `${Color(newThemeColor).alpha(1 - i * 0.1)}`
+          );
+        }
       }
     },
     {

src/utils/color.ts

@@ -1,287 +0,0 @@
-/**
- * 颜色生成
- */
-type RGB = {
-  r: number;
-  g: number;
-  b: number;
-};
-type HSL = {
-  h: number;
-  s: number;
-  l: number;
-};
-type HEX =
-  | "0"
-  | "1"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "A"
-  | "B"
-  | "C"
-  | "D"
-  | "E"
-  | "F";
-
-const RGBUnit = 255;
-const HEX_MAP: Record<HEX, number> = {
-  0: 0,
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  8: 8,
-  9: 9,
-  A: 10,
-  B: 11,
-  C: 12,
-  D: 13,
-  E: 14,
-  F: 15,
-};
-const rgbWhite = {
-  r: 255,
-  g: 255,
-  b: 255,
-};
-const rgbBlack = {
-  r: 0,
-  g: 0,
-  b: 0,
-};
-
-/**
- * RGB颜色转HSL颜色值
- * @param r 红色值
- * @param g 绿色值
- * @param b 蓝色值
- * @returns { h: [0, 360]; s: [0, 1]; l: [0, 1] }
- */
-function rgbToHsl(rgb: RGB): HSL {
-  let { r, g, b } = rgb;
-  const hsl = {
-    h: 0,
-    s: 0,
-    l: 0,
-  };
-
-  // 计算rgb基数 ∈ [0, 1]
-  r /= RGBUnit;
-  g /= RGBUnit;
-  b /= RGBUnit;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-
-  // 计算h
-  if (max === min) {
-    hsl.h = 0;
-  } else if (max === r) {
-    hsl.h = 60 * ((g - b) / (max - min)) + (g >= b ? 0 : 360);
-  } else if (max === g) {
-    hsl.h = 60 * ((b - r) / (max - min)) + 120;
-  } else {
-    hsl.h = 60 * ((r - g) / (max - min)) + 240;
-  }
-  hsl.h = hsl.h > 360 ? hsl.h - 360 : hsl.h;
-
-  // 计算l
-  hsl.l = (max + min) / 2;
-
-  // 计算s
-  if (hsl.l === 0 || max === min) {
-    // 灰/白/黑
-    hsl.s = 0;
-  } else if (hsl.l > 0 && hsl.l <= 0.5) {
-    hsl.s = (max - min) / (max + min);
-  } else {
-    hsl.s = (max - min) / (2 - (max + min));
-  }
-
-  return hsl;
-}
-
-/**
- * hsl -> rgb
- * @param h [0, 360]
- * @param s [0, 1]
- * @param l [0, 1]
- * @returns RGB
- */
-function hslToRgb(hsl: HSL): RGB {
-  const { h, s, l } = hsl;
-  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-  const p = 2 * l - q;
-  const hUnit = h / 360; // 色相转换为 [0, 1]
-
-  const Cr = fillCircleVal(hUnit + 1 / 3);
-  const Cg = fillCircleVal(hUnit);
-  const Cb = fillCircleVal(hUnit - 1 / 3);
-
-  // 保持 [0, 1] 环状取值
-  function fillCircleVal(val: number): number {
-    return val < 0 ? val + 1 : val > 1 ? val - 1 : val;
-  }
-
-  function computedRgb(val: number): number {
-    let colorVal: number;
-    if (val < 1 / 6) {
-      colorVal = p + (q - p) * 6 * val;
-    } else if (val >= 1 / 6 && val < 1 / 2) {
-      colorVal = q;
-    } else if (val >= 1 / 2 && val < 2 / 3) {
-      colorVal = p + (q - p) * 6 * (2 / 3 - val);
-    } else {
-      colorVal = p;
-    }
-    return colorVal * 255;
-  }
-
-  return {
-    r: Number(computedRgb(Cr).toFixed(0)),
-    g: Number(computedRgb(Cg).toFixed(0)),
-    b: Number(computedRgb(Cb).toFixed(0)),
-  };
-}
-
-/**
- * 16进制颜色转换RGB
- * @param color #rrggbb
- * @returns RGB
- */
-function hexToRGB(hex: string): RGB {
-  hex = hex.toUpperCase();
-  const hexRegExp = /^#([0-9A-F]{6})$/;
-  if (!hexRegExp.test(hex)) {
-    throw new Error("请传入合法的16进制颜色值，eg: #FF0000");
-  }
-
-  const hexValArr = (hexRegExp.exec(hex)?.[1] || "000000").split(
-    ""
-  ) as Array<HEX>;
-
-  return {
-    r: HEX_MAP[hexValArr[0]] * 16 + HEX_MAP[hexValArr[1]],
-    g: HEX_MAP[hexValArr[2]] * 16 + HEX_MAP[hexValArr[3]],
-    b: HEX_MAP[hexValArr[4]] * 16 + HEX_MAP[hexValArr[5]],
-  };
-}
-
-/**
- * rgb 转 16进制
- * @param rgb RGB
- * @returns #HEX{6}
- */
-function rgbToHex(rgb: RGB): string {
-  const HEX_MAP_REVERSE: Record<string, HEX> = {};
-  for (const key in HEX_MAP) {
-    HEX_MAP_REVERSE[HEX_MAP[key as HEX]] = key as HEX;
-  }
-  function getRemainderAndQuotient(val: number): string {
-    val = Math.round(val);
-    return `${HEX_MAP_REVERSE[Math.floor(val / 16)]}${
-      HEX_MAP_REVERSE[val % 16]
-    }`;
-  }
-
-  return `#${getRemainderAndQuotient(rgb.r)}${getRemainderAndQuotient(
-    rgb.g
-  )}${getRemainderAndQuotient(rgb.b)}`;
-}
-
-// hsl 转 16进制
-function hslToHex(hsl: HSL): string {
-  return rgbToHex(hslToRgb(hsl));
-}
-
-// 16进制 转 hsl
-function hexToHsl(hex: string): HSL {
-  return rgbToHsl(hexToRGB(hex));
-}
-
-// 生成混合色（混黑 + 混白）
-function genMixColor(base: string | RGB | HSL): {
-  DEFAULT: string;
-  dark: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-  };
-  light: {
-    1: string;
-    2: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-  };
-} {
-  // 基准色统一转换为RGB
-  if (typeof base === "string") {
-    base = hexToRGB(base);
-  } else if ("h" in base) {
-    base = hslToRgb(base);
-  }
-
-  // 混合色
-  function mix(color: RGB, mixColor: RGB, weight: number): RGB {
-    return {
-      r: color.r * (1 - weight) + mixColor.r * weight,
-      g: color.g * (1 - weight) + mixColor.g * weight,
-      b: color.b * (1 - weight) + mixColor.b * weight,
-    };
-  }
-
-  return {
-    DEFAULT: rgbToHex(base),
-    dark: {
-      1: rgbToHex(mix(base, rgbBlack, 0.1)),
-      2: rgbToHex(mix(base, rgbBlack, 0.2)),
-      3: rgbToHex(mix(base, rgbBlack, 0.3)),
-      4: rgbToHex(mix(base, rgbBlack, 0.4)),
-      5: rgbToHex(mix(base, rgbBlack, 0.5)),
-      6: rgbToHex(mix(base, rgbBlack, 0.6)),
-      7: rgbToHex(mix(base, rgbBlack, 0.7)),
-      8: rgbToHex(mix(base, rgbBlack, 0.78)),
-      9: rgbToHex(mix(base, rgbBlack, 0.85)),
-    },
-    light: {
-      1: rgbToHex(mix(base, rgbWhite, 0.1)),
-      2: rgbToHex(mix(base, rgbWhite, 0.2)),
-      3: rgbToHex(mix(base, rgbWhite, 0.3)),
-      4: rgbToHex(mix(base, rgbWhite, 0.4)),
-      5: rgbToHex(mix(base, rgbWhite, 0.5)),
-      6: rgbToHex(mix(base, rgbWhite, 0.6)),
-      7: rgbToHex(mix(base, rgbWhite, 0.7)),
-      8: rgbToHex(mix(base, rgbWhite, 0.78)),
-      9: rgbToHex(mix(base, rgbWhite, 0.85)),
-    },
-  };
-}
-
-export {
-  genMixColor,
-  rgbToHsl,
-  rgbToHex,
-  hslToRgb,
-  hslToHex,
-  hexToRGB,
-  hexToHsl,
-};

src/utils/index.ts

@@ -39,13 +39,3 @@ export function isExternal(path: string) {
   const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
   return isExternal;
 }
-
-/**
- * 设置Style属性
- *
- * @param propName
- * @param value
- */
-export function setStyleProperty(propName: string, value: string) {
-  document.documentElement.style.setProperty(propName, value);
-}