github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 09:18:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@vben/web-ele): fixed some style issues in dark mode (#4298)

Browse Source
This commit is contained in:
Vben
2024-09-01 22:33:11 +08:00
committed by GitHub
parent 67f3d63066
commit 3f2dcb8281
17 changed files with 93 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/effects/hooks/src/use-design-tokens.ts
View File

@@ -1,6 +1,6 @@
import { reactive, watch } from 'vue';
import { preferences } from '@vben/preferences';
import { preferences, usePreferences } from '@vben/preferences';
import { convertToRgb, updateCSSVariables } from '@vben/utils';
/**
@@ -160,53 +160,64 @@ export function useNaiveDesignTokens() {
}
export function useElementPlusDesignTokens() {
const { isDark } = usePreferences();
const rootStyles = getComputedStyle(document.documentElement);
const getCssVariableValueRaw = (variable: string) => {
return rootStyles.getPropertyValue(variable);
};
const getCssVariableValue = (variable: string, isColor: boolean = true) => {
const value = rootStyles.getPropertyValue(variable);
const value = getCssVariableValueRaw(variable);
return isColor ? convertToRgb(`hsl(${value})`) : value;
};
watch(
() => preferences.theme,
() => {
const background = getCssVariableValue('--background');
const border = getCssVariableValue('--border');
const accent = getCssVariableValue('--accent');
const variables: Record<string, string> = {
'--el-bg-color': background,
'--el-bg-color-overlay': getCssVariableValue('--popover'),
'--el-bg-color-page': getCssVariableValue('--background-deep'),
'--el-border-color': border,
'--el-border-color-dark': border,
'--el-border-color-hover': accent,
'--el-border-color-light': border,
'--el-border-color-lighter': border,
'--el-border-radius-base': getCssVariableValue('--radius', false),
'--el-border-radius-base': getCssVariableValue('--radius', false),
'--el-color-danger': getCssVariableValue('--destructive-500'),
'--el-color-danger-dark-2': getCssVariableValue('--destructive'),
'--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
'--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
'--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
'--el-color-danger-light-8': getCssVariableValue('--destructive-100'),
'--el-color-danger-light-9': getCssVariableValue('--destructive-50'),
'--el-color-danger-light-9': getCssVariableValue('--destructive-50'),
'--el-color-error': getCssVariableValue('--destructive-500'),
'--el-color-error-dark-2': getCssVariableValue('--destructive'),
'--el-color-error-light-3': getCssVariableValue('--destructive-400'),
'--el-color-error-light-5': getCssVariableValue('--destructive-300'),
'--el-color-error-light-7': getCssVariableValue('--destructive-200'),
'--el-color-error-light-8': getCssVariableValue('--destructive-100'),
'--el-color-error-light-9': getCssVariableValue('--destructive-50'),
'--el-color-info-light-8': border,
'--el-color-info-light-9': background,
'--el-color-info-light-9': background,
'--el-color-primary': getCssVariableValue('--primary-500'),
'--el-color-primary-dark-2': getCssVariableValue('--primary'),
'--el-color-primary-light-3': getCssVariableValue('--primary-400'),
'--el-color-primary-light-5': getCssVariableValue('--primary-300'),
'--el-color-primary-light-7': getCssVariableValue('--primary-200'),
'--el-color-primary-light-8': getCssVariableValue('--primary-100'),
'--el-color-primary-light-9': getCssVariableValue('--primary-50'),
'--el-color-primary-light-9': isDark.value
? accent
: getCssVariableValue('--primary-50'),
'--el-color-success': getCssVariableValue('--success-500'),
'--el-color-success-dark-2': getCssVariableValue('--success'),
@@ -214,18 +225,20 @@ export function useElementPlusDesignTokens() {
'--el-color-success-light-5': getCssVariableValue('--success-300'),
'--el-color-success-light-7': getCssVariableValue('--success-200'),
'--el-color-success-light-8': getCssVariableValue('--success-100'),
'--el-color-success-light-9': getCssVariableValue('--success-50'),
'--el-color-success-light-9': getCssVariableValue('--success-50'),
'--el-color-warning': getCssVariableValue('--warning-500'),
'--el-color-warning-dark-2': getCssVariableValue('--warning'),
'--el-color-warning-light-3': getCssVariableValue('--warning-400'),
'--el-color-warning-light-5': getCssVariableValue('--warning-300'),
'--el-color-warning-light-7': getCssVariableValue('--warning-200'),
'--el-color-warning-light-8': getCssVariableValue('--warning-100'),
'--el-color-warning-light-9': getCssVariableValue('--warning-50'),
'--el-color-warning-light-9': getCssVariableValue('--warning-50'),
'--el-fill-color-blank': background,
'--el-fill-color-light': getCssVariableValue('--accent'),
'--el-text-color-primary': getCssVariableValue('--foreground'),
'--el-text-color-regular': getCssVariableValue('--foreground'),
};
updateCSSVariables(variables, `__vben_design_styles__`);