Browse Source

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

i18n
xiaoxian521 2 years ago
parent
commit
0b8e10f964
  1. 1
      build/optimize.ts
  2. 1
      package.json
  3. 2
      pnpm-lock.yaml
  4. 29
      src/layout/hooks/useDataThemeChange.ts
  5. 2
      src/style/dark.scss

1
build/optimize.ts

@ -17,7 +17,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

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

@ -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
@ -90,7 +89,6 @@ specifiers:
vue-types: ^4.2.1 vue-types: ^4.2.1
dependencies: dependencies:
"@ctrl/tinycolor": 3.5.0
"@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

@ -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() {
} }
} }
/**
* @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` 主题色 */ /** 设置 `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(
`--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

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

Loading…
Cancel
Save