从创建vue3项目到引入elementPlus组件并设置黑暗模式

1.创建vue3项目：

npm init vue@latest

1.1 根据需求定制项目插件：

2.引入elementPlus组件：

npm install element-plus --save

2.1 如图注册全局elementPlus组件：

------------------以上启动项目后可使用elementPlus组件了------------------------

3.引入vueUse进行黑暗模式切换：

npm i @vueuse/core

3.1 main.js中引入elementPlus的黑暗样式：

3.2 测试代码：

    <template><div><span @click.stop="toggleDark()">暗黑模式</span><el-switch size="small" v-model="isDark" @change='toggleDark'/></div><div><el-card shadow="always" :body-style="{ padding: '20px' }"><el-form :model="form" label-width="auto" style="max-width: 600px"><el-form-item label="Activity name"><el-input v-model="form.name" /></el-form-item><el-form-item label="Activity zone"><el-select v-model="form.region" placeholder="please select your zone"><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item></el-form><!-- card body --></el-card></div></template><script setup lang="ts">import { ref } from "vue";import { useDark, useToggle } from "@vueuse/core";const form = ref({});const form = ref({});// 使用这种方式会导致动画失效
// const isDark = useDark();
// const toggleDark = useToggle(isDark);// 使用这种方式不会导致动画失效const isDark = ref(false)const toggleDark = (v) => {document.documentElement.classList.toggle('dark')isDark.value = v;}</script><style scoped></style>

3.2 此时通过浏览器可看到切换效果：

------------------以上启动项目对于黑暗模式引入完成------------------------

4. 自定义黑暗css样式，创建黑暗css：

4.1 通过elementPlus的黑暗样式css中拷贝变量到assets/dark.css 中进行自定义颜色修改：

4.2 main.js 中引入自定义黑暗样式css文件：

以上你在 assets/dark.css 修改变量的颜色后，即可在elementPlus组件中实现自定义颜色效果：