Element-UI Plus 暗黑主题切换及自定义主题色

1. 暗黑主题切换

1. 在main.js中引入下面文件

import ''element-plus/theme-chalk/dark/css-vars.css''
1
代码解读

2. 安装 @vueuse/core

pnpm add @vueuse/core
1
代码解读

3. App.vue 添加下面代码

使用了 useDark() 的页面才会从 localStorage中读取当前主题状态，否则，刷新页面就会恢复默认主题
在App.vue 添加 useDark() 所有页面都可以复用

import {useDark} from ''@vueuse/core''
useDark()
1
2
代码解读

4. 案例1： 按钮 控制暗黑模式切换

<script setup>
import {useDark, useToggle} from "@vueuse/core";

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
	<el-button @click="toggleDark()">{{ isDark ? ''简白主题'' : ''暗黑主题'' }}</el-button>
</template>
1
2
3
4
5
6
7
8
9
10
代码解读

5. 案例2： switch 控制暗黑模式切换

<script setup>
import {useDark} from "@vueuse/core"
const isDark=useDark()
</script>

<template>
	<el-switch v-model="isDark"></el-switch>
</template>
1
2
3
4
5
6
7
8
代码解读

2. 自定义主题色

1. 安装插件

pnpm add use-element-plus-theme
1
代码解读

2. 修改主题色

import {useElementPlusTheme} from ''use-element-plus-theme''
const color=''#efefef''
localStorage.setItem(''themeColor'',color) // 持久化主题色
useElementPlusTheme(color) // 应用主题色
1
2
3
4
代码解读

3. 全局应用主题色 （App.vue中添加下面代码）

import {useElementPlusTheme} from "use-element-plus-theme";
useElementPlusTheme(localStorage.getItem(''themeColor''))
1
2
代码解读