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

build/optimize.ts

@@ -28,7 +28,6 @@ const include = [
   "v-contextmenu",
   "vue-pdf-embed",
   "lodash-unified",
-  "@ctrl/tinycolor",
   "china-area-data",
   "vue-json-pretty",
   "@logicflow/core",

package.json

@@ -30,7 +30,6 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@ctrl/tinycolor": "^3.4.1",
     "@howdyjs/mouse-menu": "^2.0.5",
     "@logicflow/core": "^1.1.30",
     "@logicflow/extension": "^1.1.30",

pnpm-lock.yaml

@@ -4,7 +4,6 @@ specifiers:
   "@amap/amap-jsapi-loader": ^1.0.1
   "@commitlint/cli": 13.1.0
   "@commitlint/config-conventional": 13.1.0
-  "@ctrl/tinycolor": ^3.4.1
   "@howdyjs/mouse-menu": ^2.0.5
   "@iconify-icons/ep": ^1.2.7
   "@iconify-icons/mdi": ^1.2.8
@@ -118,7 +117,6 @@ specifiers:
 
 dependencies:
   "@amap/amap-jsapi-loader": 1.0.1
-  "@ctrl/tinycolor": 3.4.1
   "@howdyjs/mouse-menu": 2.0.5_vue@3.2.45
   "@logicflow/core": 1.1.31
   "@logicflow/extension": 1.1.31
@@ -836,10 +834,10 @@ packages:
       postcss-selector-parser: 6.0.11
     dev: true
 
-  /@ctrl/tinycolor/3.4.1:
+  /@ctrl/tinycolor/3.5.0:
     resolution:
       {
-        integrity: sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
+        integrity: sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==
       }
     engines: { node: ">=10" }
     dev: false
@@ -3769,7 +3767,7 @@ packages:
     peerDependencies:
       vue: ^3.2.0
     dependencies:
-      "@ctrl/tinycolor": 3.4.1
+      "@ctrl/tinycolor": 3.5.0
       "@element-plus/icons-vue": 2.0.10_vue@3.2.45
       "@floating-ui/dom": 1.0.7
       "@popperjs/core": /@sxzz/popperjs-es/2.11.7

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() {
     }
   }
 
-  /**
+  function setPropertyPrimary(mode: string, i: number, color: string) {
-   * @description 自动计算hover和active颜色
+    document.documentElement.style.setProperty(
-   * @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}
+      `--el-color-primary-${mode}-${i}`,
-   */
+      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
-  const shadeBgColor = (color: string): string => {
+    );
-    return new TinyColor(color).shade(10).toString();
+  }
-  };
 
   /** 设置 `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(
+      setPropertyPrimary("dark", i, color);
-        `--el-color-primary-dark-${i}`,
+    }
-        darken(color, i / 10)
+    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 {