fix: theme mode follow the system only auto
(#5923)
* 修复主题在未设置为auto时,仍然会跟随系统主题变化的问题。
This commit is contained in:
parent
9bd5a190c2
commit
f46ec30995
@ -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' },
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user