fix: 修复暗黑主题样式问题

build/optimize.ts

@@ -17,7 +17,6 @@ const include = [
   "lodash-es",
   "@vueuse/core",
   "lodash-unified",
-  "@ctrl/tinycolor",
   "@pureadmin/utils",
   "responsive-storage",
   "element-resize-detector"

package.json

@@ -29,7 +29,6 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@ctrl/tinycolor": "^3.4.1",
     "@pureadmin/descriptions": "^1.1.0",
     "@pureadmin/table": "^1.9.0",
     "@pureadmin/utils": "^1.8.2",

pnpm-lock.yaml

@@ -3,7 +3,6 @@ lockfileVersion: 5.4
 specifiers:
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
-  "@ctrl/tinycolor": ^3.4.1
   "@iconify-icons/ep": ^1.2.7
   "@iconify-icons/ri": ^1.2.3
   "@iconify/vue": ^4.0.0
@@ -90,7 +89,6 @@ specifiers:
   vue-types: ^4.2.1
 
 dependencies:
-  "@ctrl/tinycolor": 3.5.0
   "@pureadmin/descriptions": 1.1[email protected]
   "@pureadmin/table": 1.9[email protected]
   "@pureadmin/utils": 1.8[email protected][email protected]

src/layout/hooks/useDataThemeChange.ts

@@ -3,7 +3,6 @@ import { getConfig } from "@/config";
 import { find } from "lodash-unified";
 import { useLayout } from "./useLayout";
 import { themeColorsType } from "../types";
-import { TinyColor } from "@ctrl/tinycolor";
 import { useGlobal } from "@pureadmin/utils";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import {
@@ -61,30 +60,22 @@ export function useDataThemeChange() {
     }
   }
 
-  /**
-   * @description 自动计算hover和active颜色
-   * @see {@link https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2}
-   */
-  const shadeBgColor = (color: string): string => {
-    return new TinyColor(color).shade(10).toString();
-  };
+  function setPropertyPrimary(mode: string, i: number, color: string) {
+    document.documentElement.style.setProperty(
+      `--el-color-primary-${mode}-${i}`,
+      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
+    );
+  }
 
   /** 设置 `element-plus` 主题色 */
   const setEpThemeColor = (color: string) => {
     useEpThemeStoreHook().setEpThemeColor(color);
-    body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
     document.documentElement.style.setProperty("--el-color-primary", color);
-    for (let i = 1; i <= 9; i++) {
-      document.documentElement.style.setProperty(
-        `--el-color-primary-light-${i}`,
-        lighten(color, i / 10)
-      );
-    }
     for (let i = 1; i <= 2; i++) {
-      document.documentElement.style.setProperty(
-        `--el-color-primary-dark-${i}`,
-        darken(color, i / 10)
-      );
+      setPropertyPrimary("dark", i, color);
+    }
+    for (let i = 1; i <= 9; i++) {
+      setPropertyPrimary("light", i, color);
     }
   };
 

src/style/dark.scss

@@ -1,4 +1,4 @@
-@import "element-plus/theme-chalk/src/dark/css-vars.scss";
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
 
 /* 暗黑模式适配 */
 html.dark {