From f55b18ffd71c1e497905e6516425fb7bf4dfa6d3 Mon Sep 17 00:00:00 2001
From: Akuria <46207353+Akur1a@users.noreply.github.com>
Date: Sat, 16 May 2026 10:42:35 +0800
Subject: [PATCH] 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
---
 .changeset/element-plus-theme-switch.md                     | 5 +++++
 .../src/widgets/preferences/blocks/theme/builtin.vue        | 6 ++----
 2 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/element-plus-theme-switch.md

diff --git a/.changeset/element-plus-theme-switch.md b/.changeset/element-plus-theme-switch.md
new file mode 100644
index 000000000..d0c07d83d
--- /dev/null
+++ b/.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
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
index 1bb142aee..c262eeb96 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
+++ b/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;
     }
   },
 );