twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-10-31 07:34:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xiaoxian521 2022-12-09 20:35:50 +08:00
parent 30af2b78fe
commit 1bcf391513
5 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/optimize.ts
View File

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

1
package.json
View File

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

2
pnpm-lock.yaml generated
View File

@ -3,7 +3,6 @@ lockfileVersion: 5.4
specifiers: specifiers:
"@commitlint/cli": 13.1.0 "@commitlint/cli": 13.1.0
"@commitlint/config-conventional": 13.1.0 "@commitlint/config-conventional": 13.1.0
"@ctrl/tinycolor": ^3.4.1
"@iconify-icons/ep": ^1.2.7 "@iconify-icons/ep": ^1.2.7
"@iconify-icons/ri": ^1.2.3 "@iconify-icons/ri": ^1.2.3
"@iconify/vue": ^4.0.0 "@iconify/vue": ^4.0.0
@ -88,7 +87,6 @@ specifiers:
vue-types: ^4.2.1 vue-types: ^4.2.1
dependencies: dependencies:
"@ctrl/tinycolor": 3.4.1
"@pureadmin/descriptions": 1.1.1_element-plus@2.2.26 "@pureadmin/descriptions": 1.1.1_element-plus@2.2.26
"@pureadmin/table": 1.9.0_element-plus@2.2.26 "@pureadmin/table": 1.9.0_element-plus@2.2.26
"@pureadmin/utils": 1.8.2_echarts@5.4.0+vue@3.2.45 "@pureadmin/utils": 1.8.2_echarts@5.4.0+vue@3.2.45

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

@ -3,7 +3,6 @@ import { getConfig } from "@/config";
import { find } from "lodash-unified"; import { find } from "lodash-unified";
import { useLayout } from "./useLayout"; import { useLayout } from "./useLayout";
import { themeColorsType } from "../types"; import { themeColorsType } from "../types";
import { TinyColor } from "@ctrl/tinycolor";
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { 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` 主题色 */ /** 设置 `element-plus` 主题色 */
const setEpThemeColor = (color: string) => { const setEpThemeColor = (color: string) => {
useEpThemeStoreHook().setEpThemeColor(color); useEpThemeStoreHook().setEpThemeColor(color);
body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
document.documentElement.style.setProperty("--el-color-primary", 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++) { 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);
} }
}; };

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 { html.dark {