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

1. 暗黑主题切换

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

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

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

2. 自定义主题色

  1. 安装插件
pnpm add use-element-plus-theme
  1. 修改主题色
import {useElementPlusTheme} from 'use-element-plus-theme'
const color='#efefef'
localStorage.setItem('themeColor',color) // 持久化主题色
useElementPlusTheme(color) // 应用主题色
  1. 全局应用主题色 (App.vue中添加下面代码)
import {useElementPlusTheme} from "use-element-plus-theme";
useElementPlusTheme(localStorage.getItem('themeColor'))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/55721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode讲解篇之1043. 分隔数组以得到最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 对于这题我们这么考虑&#xff0c;我们选择以数字的第i个元素做为分隔子数组的右边界&#xff0c;我们需要计算当前分隔子数组的长度为多少时能让数组[0, i]进行分隔数组的和最大 我们用数组f表示[0, i)区间内的…

docker 部署 Seatunnel 和 Seatunnel Web

docker 部署 Seatunnel 和 Seatunnel Web 说明&#xff1a; 部署方式前置条件&#xff0c;已经在宿主机上运行成功运行文件采用挂载宿主机目录的方式部署SeaTunnel Engine 采用的是混合模式集群 编写Dockerfile并打包镜像 Seatunnel FROM openjdk:8 WORKDIR /opt/seatunne…

自动驾驶-问题笔记-待解决

参考线的平滑方法 参考线平滑算法主要有三种&#xff1a; 离散点平滑&#xff1b;螺旋曲线平滑&#xff1b;多项式平滑&#xff1b; 参考链接&#xff1a;参考线平滑 对于平滑方法&#xff0c;一直不太理解平滑、拟合以及滤波三者的作用与区别&#xff1b; 规划的起点&#x…

leetcode第189题:轮转数组(C语言版)

思路1&#xff08;不推荐&#xff09; 保存数组最后一个元素&#xff0c;然后数组全体元素后移一位&#xff0c;把保存的最后一个元素存放到数组的第一个位置&#xff0c;重复这一操作&#xff0c;直到执行完了k次。 时间复杂度&#xff1a;需要用k次循环&#xff0c;里面套一层…

MySQL的驱动安装

1、下载并安装MySQL 下载地址&#xff1a; 建议在下列框中选择LTS长期支持版本&#xff0c;下载对应的MSI安装文件。 安装完成后&#xff0c;将MySQL的环境bin路径添加到环境变量中。 可以运行MySQL Configurator进行配置&#xff0c;主要设置密码&#xff0c;并初始化。其余…

Ruby 数组(Array)

Ruby 数组&#xff08;Array&#xff09; 引言 Ruby&#xff0c;作为一种高级编程语言&#xff0c;以其简洁明了的语法和强大的功能而闻名。在Ruby中&#xff0c;数组&#xff08;Array&#xff09;是一种基本的数据结构&#xff0c;用于存储一系列有序的元素。本文将深入探讨…

【五分钟学会】YOLO11 自定义数据集从训练到部署

数据集地址 数据集包含 360 张红血细胞图像及其注释文件&#xff0c;分为训练集与验证集。训练文件夹包含 300 张带有注释的图像。测试和验证文件夹都包含 60 张带有注释的图像。我们对原始数据集进行了一些修改以准备此 CBC 数据集&#xff0c;并将数据集分成三部分。在360张…

<<迷雾>> 第8章 学生时代的走马灯(3)--走马灯 示例电路

几个首尾相连的触发器使用同一个控制端&#xff0c;能同时触发 info::操作说明 鼠标单击开关切换开合状态 注: 其中 CP 为按钮开关, 每点击一次, Q 的输出前进一级 注: 第一个触发器的输出端 Q 需要先置入高电平. 如果重置了电路, 可外接电源先使第一个 Q 置入高电平. 另: 因为…

【Windows】在任务管理器中隐藏进程

在此前的一篇&#xff0c;我们已经介绍过了注入Dll 阻止任务管理器结束进程 -- Win 10/11。本篇利用 hook NtQuerySystemInformation 并进行断链的方法实现进程隐身&#xff0c;实测支持 taskmgr.exe 的任意多进程隐身。 任务管理器 代码&#xff1a; // dllmain.cpp : 定义 …

【中间件学习】Git的命令和企业级开发

一、Git命令 1.1 创建Git本地仓库 仓库是进行版本控制的一个文件目录。我们要想对文件进行版本控制&#xff0c;就必须创建出一个仓库出来。创建一个Git本地仓库对应的命令是 git init &#xff0c;注意命令要在文件目录下执行。 hrxlavm-1lzqn7w2w6:~/gitcode$ pwd /home/hr…

No.10 笔记 | PHP学习指南:PHP数组掌握

本指南为PHP开发者提供了一个全面而简洁的数组学习路径。从数组的基本概念到高级操作技巧&#xff0c;我们深入浅出地解析了PHP数组的方方面面。无论您是初学者还是寻求提升的中级开发者&#xff0c;这份指南都能帮助您更好地理解和运用PHP数组&#xff0c;提高编码效率和代码质…

python之运算符

1、算术运算符 算术运算符常用的有&#xff1a;&#xff0c;-&#xff0c;*&#xff0c; &#xff0c;/&#xff0c;//&#xff0c;%&#xff0c;>>,<< 1.1、加 常见的是算术相加&#xff0c;还有一种是字符串拼接。 a 10 b 20 print(a b) c "My &quo…

Python中的观察者模式:从基础到实战

引言 在软件开发中&#xff0c;设计模式是解决特定问题的通用解决方案。观察者模式&#xff08;Observer Pattern&#xff09;是其中一种非常有用的模式&#xff0c;它定义了对象之间的一对多依赖关系&#xff0c;当一个对象状态发生变化时&#xff0c;所有依赖于它的对象都会…

基于facefusion的换脸

FaceFusion是一个引人注目的开源项目&#xff0c;它专注于利用深度学习技术实现视频或图片中的面部替换。作为下一代换脸器和增强器&#xff0c;FaceFusion在人脸识别和合成技术方面取得了革命性的突破&#xff0c;为用户提供了前所未有的视觉体验。 安装 安装基础软件 安装…

注册安全分析报告:科研诚信查询平台无验证方式导致安全隐患

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

15分钟学 Python 第40天:Python 爬虫入门(六)第一篇

Day40 &#xff1a;Python 爬取豆瓣网前一百的电影信息 1. 项目背景 在这个项目中&#xff0c;我们将学习如何利用 Python 爬虫技术从豆瓣网抓取前一百部电影的信息。通过这一练习&#xff0c;您将掌握网页抓取的基本流程&#xff0c;包括发送请求、解析HTML、存储数据等核心…

Elasticsearch基础_2.数据类型

文章目录 一、基本的数据类型1.1、keyword1.2、text1.3、数值类型1.4、布尔类型1.5、时间类型 二、复杂的数据类型三、字段映射 一、基本的数据类型 1.1、keyword keyword类型是不进行切分的字符串类型。这里的“不进行切分”指的是&#xff1a;在索引时&#xff0c;对keyword…

m4a怎么转换成mp3?音频转换MP3只需要这6个小工具!

m4a怎么转换成mp3&#xff1f;M4A和MP3是两种常见的音频格式&#xff0c;M4A通常使用AAC&#xff08;高级音频编码&#xff09;进行压缩&#xff0c;提供更高的音质和更小的文件体积&#xff0c;特别适合在Apple设备上使用。而MP3则以其高压缩比和广泛的兼容性著称&#xff0c;…

《Linux从小白到高手》理论篇:Linux的系统服务管理

值此国庆佳节&#xff0c;深宅家中&#xff0c;闲来无事&#xff0c;就多写几篇博文。本篇详细深入介绍Linux的系统服务管理。 系统服务通常在系统启动时自动启动&#xff0c;并在后台持续运行&#xff0c;为系统和用户提供特定的功能。例如&#xff0c;网络服务、打印服务、数…

EWSTM8 IAR for STM8 软件分享

1. 软件简介 EWSTM8&#xff0c;即 IAR for STM8&#xff0c;全称为 IAR Embedded Workbench for STM8&#xff0c;它是 IAR ARM 嵌入式工作台之一&#xff0c;用于开发 STM8。IAR 有多个不同名的版本&#xff0c;对应不同的开发对象。 EWSTM8最新版本为V3.11&#xff08;202…