Vue监听系统深色模式切换主题
mounted() {
const { brandTheme, brandLightTheme, mode } = config;
let theme = mode;
if (mode === 'auto') {
const media = window.matchMedia('(prefers-color-scheme:dark)');
if (media.matches) {
theme = 'dark';
} else {
theme = 'light';
}
media.addEventListener('change', e => {
// 深色模式
if (e.matches) {
// 设置主题
this.$store.dispatch('setting/changeTheme', { ...config, mode: 'dark', brandTheme });
} else {
// 设置主题
this.$store.dispatch('setting/changeTheme', { ...config, mode: 'light', brandTheme: brandLightTheme });
}
});
}
if (theme === 'light')
config.brandTheme = brandLightTheme;
// 设置主题
this.$store.dispatch('setting/changeTheme', { ...config });
}
1 评论