test/vue-pure-admin2
1
0
Fork 0
mirror of https://gitee.com/yiming_chang/vue-pure-admin.git synced 2024-12-02 03:07:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xiaoxian521 2022-12-09 20:18:49 +08:00
parent 49dabd6b36
commit 3933f34883
5 changed files with 14 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/optimize.ts
View File

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

1
package.json
View File

@ -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",

8
pnpm-lock.yaml
View File

@ -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

29
src/layout/hooks/useDataThemeChange.ts
View File

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

2
src/style/dark.scss
View File

@ -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 {