fix: theme mode follow the system only auto (#5923)

* 修复主题在未设置为auto时,仍然会跟随系统主题变化的问题。
This commit is contained in:
Netfan 2025-04-12 01:16:57 +08:00 committed by GitHub
parent 9bd5a190c2
commit f46ec30995
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 9 deletions

View File

@ -198,9 +198,16 @@ class PreferenceManager {
window window
.matchMedia('(prefers-color-scheme: dark)') .matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', ({ matches: isDark }) => { .addEventListener('change', ({ matches: isDark }) => {
this.updatePreferences({ // 如果偏好设置中主题模式为auto则跟随系统更新
theme: { mode: isDark ? 'dark' : 'light' }, if (this.state.theme.mode === 'auto') {
}); this.updatePreferences({
theme: { mode: isDark ? 'dark' : 'light' },
});
// 恢复为auto模式
this.updatePreferences({
theme: { mode: 'auto' },
});
}
}); });
} }

View File

@ -106,7 +106,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
initVxeTable(); initVxeTable();
useTableForm = useVbenForm; useTableForm = useVbenForm;
const preference = usePreferences(); const { isDark, locale } = usePreferences();
const localMap = { const localMap = {
'zh-CN': zhCN, 'zh-CN': zhCN,
@ -114,11 +114,11 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) {
}; };
watch( watch(
[() => preference.theme.value, () => preference.locale.value], [() => isDark.value, () => locale.value],
([theme, locale]) => { ([isDarkValue, localeValue]) => {
VxeUI.setTheme(theme === 'dark' ? 'dark' : 'light'); VxeUI.setTheme(isDarkValue ? 'dark' : 'light');
VxeUI.setI18n(locale, localMap[locale]); VxeUI.setI18n(localeValue, localMap[localeValue]);
VxeUI.setLanguage(locale); VxeUI.setLanguage(localeValue);
}, },
{ {
immediate: true, immediate: true,