始于此, 终于斯
文章31
标签0
分类13

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 评论

    1. 1 12月6日 回复
      555