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

1. 暗黑主题切换

  1. 在main.js中引入下面文件
js 复制代码
import 'element-plus/theme-chalk/dark/css-vars.css'
  1. 安装 @vueuse/core
bash 复制代码
pnpm add @vueuse/core
  1. App.vue 添加下面代码

使用了 useDark() 的页面才会从 localStorage中读取当前主题状态,否则,刷新页面就会恢复默认主题

在App.vue 添加 useDark() 所有页面都可以复用

js 复制代码
import {useDark} from '@vueuse/core'
useDark()
  1. 案例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>
  1. 案例2: switch 控制暗黑模式切换
bash 复制代码
<script setup>
import {useDark} from "@vueuse/core"
const isDark=useDark()
</script>

<template>
	<el-switch v-model="isDark"></el-switch>
</template>

2. 自定义主题色

  1. 安装插件
bash 复制代码
pnpm add use-element-plus-theme
  1. 修改主题色
js 复制代码
import {useElementPlusTheme} from 'use-element-plus-theme'
const color='#efefef'
localStorage.setItem('themeColor',color) // 持久化主题色
useElementPlusTheme(color) // 应用主题色
  1. 全局应用主题色 (App.vue中添加下面代码)
bash 复制代码
import {useElementPlusTheme} from "use-element-plus-theme";
useElementPlusTheme(localStorage.getItem('themeColor'))
相关推荐
捕鲸叉5 分钟前
创建线程时传递参数给线程
开发语言·c++·算法
A charmer9 分钟前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq12 分钟前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
SoraLuna1 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
记录成长java2 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~2 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程2 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
观音山保我别报错2 小时前
C语言扫雷小游戏
c语言·开发语言·算法
小屁孩大帅-杨一凡3 小时前
java后端请求想接收多个对象入参的数据
java·开发语言