【vue3】【elementPlus】【黑暗模式】

从创建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组件中实现自定义颜色效果：