|
|
@@ -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);
|
|
|
}
|
|
|
};
|
|
|
|
xiaoxian521