版本

vue:3.2.37
node.js:14.19.2
element-plus:2.2.9

简述

因为公司项目需求设置，light和dark两者主题模式，element-plus带有主题切换，其他的样式通过scss设置全局变量实现

element-plus

官网实现dark主题只需要在index.html中添加一个类名class="dark",但我需要实现点击按钮的动态切换可以使用Usedark 我们只要直接引入就可以实现element-ui组件的动态切换

<template>
<el-switch
    v-model="theme"
    size="large"
    @click="toggle()"
/>
</template>

<script lang="ts" setup>
import { useToggle } from '@vueuse/shared'
import { useDark } from "@vueuse/core";

const toggle = useToggle(isDark);
</script>

全局变量

在其他的地方主题样可以通过scss的全局变量实现

styles/common.scss

// 文字颜色
$fontColor: var(--font-color, #333);
// 盒子背景
$boxBgColor: var(--bg-color, #fff);
//背景颜色
$boxBgColor2: var(--bg2-color, #f2f2f2);
//边框的颜色
$borderColor2: var(--boder-color, #f2f2f2);
//svg的颜色
$svgColor2: var(--svg-color, #000);

untils/changeColor.ts

// 修改主题
import { ref } from 'vue';
const useThem = () => {
    const isDarkThem = ref<boolean>(false); // 是否是暗黑主题
    // 主题切换
    const changeThem = () => {
        if (isDarkThem.value) {
            document.getElementsByTagName('body')[0].style.setProperty('--font-color', '#fff');
            document.getElementsByTagName('body')[0].style.setProperty('--bg-color', '#000');
            document.getElementsByTagName('body')[0].style.setProperty('--bg2-color', '#141414');
            document.getElementsByTagName('body')[0].style.setProperty('--boder-color', '#2f2e2e');
            document.getElementsByTagName('body')[0].style.setProperty('--svg-color', '#fff');

        } else {
            document.getElementsByTagName('body')[0].style.setProperty('--font-color', '#333');
            document.getElementsByTagName('body')[0].style.setProperty('--bg-color', '#fff');
            document.getElementsByTagName('body')[0].style.setProperty('--bg2-color', '#f2f2f2');
            document.getElementsByTagName('body')[0].style.setProperty('--boder-color', '#f2f2f2');
            document.getElementsByTagName('body')[0].style.setProperty('--svg-color', '#000');

        }
    }
    return { isDarkThem, changeThem }
}

调用useThem()

<template>
<el-switch
    v-model="theme"
    size="large"
    @click="toggle(),change()"
/>
</template>

<script lang="ts" setup>
import { useToggle } from '@vueuse/shared'
import { useDark } from "@vueuse/core";
import { useThem } from '../../utils/changeColor'

const toggle = useToggle(isDark);

const { isDarkThem, changeThem } = useThem();
const change = () => {
  console.log(isDarkThem.value)
  isDarkThem.value = !isDarkThem.value
  changeThem()
}
</script>

完结

以上就完成了，其他样式可以使用var(--bg-color)