1. 暗黑主题切换
- 在main.js中引入下面文件
js
import 'element-plus/theme-chalk/dark/css-vars.css'
- 安装 @vueuse/core
bash
pnpm add @vueuse/core
- App.vue 添加下面代码
使用了 useDark() 的页面才会从 localStorage中读取当前主题状态,否则,刷新页面就会恢复默认主题
在App.vue 添加 useDark() 所有页面都可以复用
js
import {useDark} from '@vueuse/core'
useDark()
- 案例1: 按钮 控制暗黑模式切换
html
<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>
- 案例2: switch 控制暗黑模式切换
bash
<script setup>
import {useDark} from "@vueuse/core"
const isDark=useDark()
</script>
<template>
<el-switch v-model="isDark"></el-switch>
</template>
2. 自定义主题色
- 安装插件
bash
pnpm add use-element-plus-theme
- 修改主题色
js
import {useElementPlusTheme} from 'use-element-plus-theme'
const color='#efefef'
localStorage.setItem('themeColor',color) // 持久化主题色
useElementPlusTheme(color) // 应用主题色
- 全局应用主题色 (App.vue中添加下面代码)
bash
import {useElementPlusTheme} from "use-element-plus-theme";
useElementPlusTheme(localStorage.getItem('themeColor'))