Bladeren bron

fix: update primary color when toggling dark/light mode with custom theme (#7909)

When a custom theme is selected and the user toggles between dark and
light mode, the primary color was not being recalculated. This was caused
by a guard condition in the builtin theme watcher that skipped updating
themeColorPrimary for custom themes during mode changes.

Remove the guard so that the primary color is always recalculated from
the theme preset when the mode changes, ensuring Element Plus CSS
variables stay in sync.

Fixes #6615
Akuria 4 weken geleden
bovenliggende
commit
f55b18ffd7

+ 5 - 0
.changeset/element-plus-theme-switch.md

@@ -0,0 +1,5 @@
+---
+"@vben/layouts": patch
+---
+
+fix: update primary color when toggling dark/light mode with custom theme

+ 2 - 4
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -103,7 +103,7 @@ function selectColor() {
 
 watch(
   () => [modelValue.value, props.isDark] as [BuiltinThemeType, boolean],
-  ([themeType, isDark], [_, isDarkPrev]) => {
+  ([themeType, isDark]) => {
     const theme = builtinThemePresets.value.find(
       (item) => item.type === themeType,
     );
@@ -112,9 +112,7 @@ watch(
         ? theme.darkPrimaryColor || theme.primaryColor
         : theme.primaryColor;
 
-      if (!(theme.type === 'custom' && isDark !== isDarkPrev)) {
-        themeColorPrimary.value = primaryColor || theme.color;
-      }
+      themeColorPrimary.value = primaryColor || theme.color;
     }
   },
 );