Browse Source
fix: theme mode follow the system only `auto` (#5923)
* 修复主题在未设置为auto时,仍然会跟随系统主题变化的问题。
pull/5924/head
Netfan
10 months ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with
16 additions and
9 deletions
-
packages/@core/preferences/src/preferences.ts
-
packages/effects/plugins/src/vxe-table/init.ts
|
|
|
@ -198,9 +198,16 @@ class PreferenceManager { |
|
|
|
window |
|
|
|
.matchMedia('(prefers-color-scheme: dark)') |
|
|
|
.addEventListener('change', ({ matches: isDark }) => { |
|
|
|
this.updatePreferences({ |
|
|
|
theme: { mode: isDark ? 'dark' : 'light' }, |
|
|
|
}); |
|
|
|
// 如果偏好设置中主题模式为auto,则跟随系统更新
|
|
|
|
if (this.state.theme.mode === 'auto') { |
|
|
|
this.updatePreferences({ |
|
|
|
theme: { mode: isDark ? 'dark' : 'light' }, |
|
|
|
}); |
|
|
|
// 恢复为auto模式
|
|
|
|
this.updatePreferences({ |
|
|
|
theme: { mode: 'auto' }, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -106,7 +106,7 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) { |
|
|
|
initVxeTable(); |
|
|
|
useTableForm = useVbenForm; |
|
|
|
|
|
|
|
const preference = usePreferences(); |
|
|
|
const { isDark, locale } = usePreferences(); |
|
|
|
|
|
|
|
const localMap = { |
|
|
|
'zh-CN': zhCN, |
|
|
|
@ -114,11 +114,11 @@ export function setupVbenVxeTable(setupOptions: SetupVxeTable) { |
|
|
|
}; |
|
|
|
|
|
|
|
watch( |
|
|
|
[() => preference.theme.value, () => preference.locale.value], |
|
|
|
([theme, locale]) => { |
|
|
|
VxeUI.setTheme(theme === 'dark' ? 'dark' : 'light'); |
|
|
|
VxeUI.setI18n(locale, localMap[locale]); |
|
|
|
VxeUI.setLanguage(locale); |
|
|
|
[() => isDark.value, () => locale.value], |
|
|
|
([isDarkValue, localeValue]) => { |
|
|
|
VxeUI.setTheme(isDarkValue ? 'dark' : 'light'); |
|
|
|
VxeUI.setI18n(localeValue, localMap[localeValue]); |
|
|
|
VxeUI.setLanguage(localeValue); |
|
|
|
}, |
|
|
|
{ |
|
|
|
immediate: true, |
|
|
|
|