yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
master^2
Akuria 2026-05-16 10:42:35 +08:00 committed by GitHub
parent ca5931e8c4
commit f55b18ffd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/element-plus-theme-switch.md Normal file
View File

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

6
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue
View File

@ -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;
}
},
);