vue中利用:root切换主题

在尝试几种切换主题方法后，感觉利用root切换主题更加方便，将实现过程记录一下。

:root是CSS伪类匹配文档树的根元素，除了优先级更高之外，与html选择器相同。可以给:root添加them属性，并通过更改them属性值更改主题。

1.主题配置

为了方便后续开发，可以将项目分为两个css文件，public.css与them.css，而them.css则存放两套主题颜色。

/*them.css*/
:root[theme="dark"] {
    --div-background-color: #1a1a1a;
    /*更多颜色...*/
}
:root[theme="light"] {
    --div-background-color: #fdfdfd;
    /*更多颜色...*/
}

2.state

我们可以用一个state保存当前主题类别，同时分别需要一个getter与mutation用于后续获取them与更改them。

/*store/index.jd*/
state: {
        them: 'dark',   //主题
    },
    getters: {
        getTheme: state => {
            return state.them
        }
    },
    mutations: {
        async changeThemeMutations(state) {
            document.getElementById('body').style.transition ='all 0.3s'
            if (state.them === 'dark') {
                // link.href = './css/light-theme.css';
                window.document.documentElement.setAttribute('theme', 'light');
                state.them = 'light'
            } else {
                // link.href = './css/dark-theme.css';
                window.document.documentElement.setAttribute('theme', 'dark');
                state.them = 'dark'
            }
        },
    }

3.切换按钮

为了让切换按钮更加生动，可以模仿Vue官网的切换按钮。在按钮点击后，调用mutations里的changeThemeMutations,同应该在按钮组件渲染时，获取主题类型且按钮保持相同类型状态，还需要在组件
created阶段获取them值且改变按钮相应状态。

  // 按钮.vue
  data() {
    return {
        theme_:''
    }
},
created() {
    this.theme = this.getTheme
},
computed: {
...mapGetters(['getTheme'])
},
watch: {
    getTheme(new_) {
        const element = this.$refs.themeChangeButtonImage
        if (new_ === "light") {
            element.classList.remove('theme-change-button-bg-dark')
            element.classList.add('theme-change-button-light')
            element.style.marginLeft = '25px'
        } else {
            element.classList.remove('theme-change-button-light')
            element.classList.add('theme-change-button-bg-dark')
            element.style.marginLeft = '0px'
        }
    }
},
methods: {
...mapMutations(['changeThemeMutations']),
        changeTheme() {
        this.changeThemeMutations()
    },
}

4.效果