基于Vue3+Element_plus完成明暗主题切换

vue脚手架和elementUI的安装就不赘述了，直奔主题，怎么完成vue项目的明暗两种主题切换？

查看elementUI的文档暗黑模式 | Element Plus，我们只需要在index.html的html标签中新增一个class="dark"的属性即可将主题切换成暗黑模式，但是加上开关控制两种模式切换如何进行？

第一步，查看Vueus：useDark | VueUse关于主题切换的按钮：

第二步，查看源码：

从源码中我们发现，他调用了vueuse的内置方法：useToggle，并传入了一个对象 isDark，再追溯到这个isDark导入的文件：

isDark这个对象的由来就有了，开始写代码：

在项目的静态目录assets下的js目录中新增dark.js复制上述的isDark代码

import { useDark } from '@vueuse/core'

export const isDark = useDark({
    storageKey: 'vitepress-theme-appearance',
})

在需要切换主题的组件TopLable.vue中，导入useToggle内置方法和isDark对象：

<template>
     <div class="env-box" style="height: 100%;width:330px">
            <el-switch v-model="isDark" size="large" inline-prompt>
                <template #active-action>
                    <el-icon>
                        <MoonNight />
                    </el-icon>
                </template>
                <template #inactive-action>
                    <el-icon>
                        <Sunny />
                    </el-icon>
                </template>
            </el-switch>
        </div>
</template>

<script>

import { useToggle } from '@vueuse/core';
import { isDark } from '@/assets/js/dark';
const toggleDark = useToggle(isDark);

export default {
    components: {},
    props: {},
    emit: [],
    data() {
        return {
            isDark: isDark,
        };
    },
    watch: {},
    computed: {
     
    },
    methods: {
        
    },
    created() {
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>

swithc开关绑定的对象是我们导入的isDark对象，在切换开关时isDark的属性也随之更改，传入内置函数的值也会随之更改，整个项目的主题就跟着更改：

可以看到用到elementui的组件会随着主题自动切换字体和组件的颜色，其他的没有使用的组件的则是固定的，需要后期手动优化一下。

总结一下

1、在indexl.html中新增class="drak"属性

2、静态文件assets中新增dark.js文件，调用内置方法useDark，导出isDark对象（当然，你也可以在组件中直接使用useDark，我这里是方便管理新增的一个文件）

3、在需要切换主题的组件中引入内置方法useToggle，引入dark.js文件中的isDarkd对象，并传入useToggle方法中，使用组件Switch开关绑定组件中的isDark属性，切换开关即可