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

* fix(@vben/web-ele): fixed some style issues in dark mode * fix: lint --------- Co-authored-by: Vben <ann.vben@gmail.com>
vbenjs · Sep 19, 2024 · a634ec3 · a634ec3
1 parent df48409
commit a634ec3
Showing 1 changed file with 30 additions and 10 deletions.
diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
@@ -185,6 +185,7 @@ export function useElementPlusDesignTokens() {
         '--el-bg-color-page': getCssVariableValue('--background-deep'),
         '--el-border-color': border,
         '--el-border-color-dark': border,
+        '--el-border-color-extra-light': border,
         '--el-border-color-hover': accent,
         '--el-border-color-light': border,
         '--el-border-color-lighter': border,
@@ -195,26 +196,36 @@ export function useElementPlusDesignTokens() {
         '--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-8': isDark.value
+          ? border
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-danger-light-9': isDark.value
+          ? accent
+          : 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-8': isDark.value
+          ? border
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-error-light-9': isDark.value
+          ? accent
+          : getCssVariableValue('--destructive-50'),
 
-        '--el-color-error-light-9': getCssVariableValue('--destructive-50'),
         '--el-color-info-light-8': border,
-
         '--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-8': isDark.value
+          ? border
+          : getCssVariableValue('--primary-100'),
         '--el-color-primary-light-9': isDark.value
           ? accent
           : getCssVariableValue('--primary-50'),
@@ -224,17 +235,26 @@ export function useElementPlusDesignTokens() {
         '--el-color-success-light-3': getCssVariableValue('--success-400'),
         '--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-8': isDark.value
+          ? border
+          : getCssVariableValue('--success-100'),
+        '--el-color-success-light-9': isDark.value
+          ? accent
+          : 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-8': isDark.value
+          ? border
+          : getCssVariableValue('--warning-100'),
+        '--el-color-warning-light-9': isDark.value
+          ? accent
+          : getCssVariableValue('--warning-50'),
 
-        '--el-color-warning-light-9': getCssVariableValue('--warning-50'),
+        '--el-fill-color': getCssVariableValue('--accent'),
         '--el-fill-color-blank': background,
         '--el-fill-color-light': getCssVariableValue('--accent'),
         '--el-text-color-primary': getCssVariableValue('--foreground'),