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'))
相关推荐
264玫瑰资源库1 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
普if加的帕1 小时前
java Springboot使用扣子Coze实现实时音频对话智能客服
java·开发语言·人工智能·spring boot·实时音视频·智能客服
拉不动的猪2 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
安冬的码畜日常2 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
Quz2 小时前
使用Qt Quick Controls创建自定义日历组件
qt·ui·交互
朝阳5812 小时前
Rust项目GPG签名配置指南
开发语言·后端·rust
朝阳5812 小时前
Rust实现高性能目录扫描工具ll的技术解析
开发语言·后端·rust
程高兴2 小时前
基于Matlab的车牌识别系统
开发语言·matlab