ElementUI RUOYI 深色适配

1. 切换按钮:随便找个页面放上去

页面触发逻辑如下

a. html 按钮结构(可自定义)

 <el-switchstyle="margin-top: 4px; margin-left: 8px; margin-right: 8px"v-model="isDark"inline-promptactive-icon="Moon"size="large"inactive-icon="Sunny"active-color="var(--el-fill-color-dark)"inactive-color="var(--el-color-primary)"@change="toggleDark"/>

b. script,vueuse/core 工具库提供了一些操作便利,内部实现了在 HTMl 根元素添加 class="dark"类,和持久化等操作。开发者不用关心实现原理。Element-UI 深色基于vueuse/core,所以能实现完美适配。

import { useDark, useToggle } from "@vueuse/core";const isDark = useDark();
const toggleDark = () => useToggle(isDark);

c. 安装vueuse/core(若安装则忽略)

npm i @vueuse/core

完成上述步骤 点击按钮即可完成 ElementUI 深色、浅色切换

2. 若继续对自定义布局进行深色适配

a. 自定义 theme.css(文件位置随意)

:root {--lly-c0:#ffffff;--lly-c1:#ffffff;--lly-c2:#e6e6e6;--lly-c3:#cccccc;--lly-c4:#b3b3b3;--lly-c5:#999999;--lly-c6:#808080;--lly-c7:#666666;--lly-c8:#4d4d4d;--lly-c9:#333333;--lly-c10:#1a1a1a;--lly-c11:#000000;--lly-menu-background: #304156;
}html,.dark{--lly-c0:#0e0e0e;--lly-c1:#333333;--lly-c2:#333333;--lly-c3:#383838;--lly-c4:#4d4d4d;--lly-c5:#666666;--lly-c6:#808080;--lly-c7:#999999;--lly-c8:#b3b3b3;--lly-c9:#cccccc;--lly-c10:#e6e6e6;--lly-c11:#ffffff;--lly-menu-background: #161d27;
}

b. App.vue 或 main.js 中引入,这里只提供 app.vue    main.js 引入参照其他 css引入

<style lang="scss">
@import "@/assets/styles/theme.css";
</style>

注意:置于其他 css文件之后

c. 需要适配深色模式的地方使用自定义色系

.card_box {background-color: var(--lly-c2) !important;
}
.card_text span {color: var(--lly-c7) !important;
}

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

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

相关文章

用阅读丈量世界 用标准突破边界——The Open Group“开放标准书单”推荐!

The Open Group 依托旗下多个论坛&#xff0c;不断推陈出新标准、指南、白皮书、案例分析等形式多样的发布物&#xff0c;为行业在数字能力赛道的良性高速发展提供先进的理念、方法、策略以及具体应用场景下的最佳实践。 正值第29个“世界读书日”&#xff0c;The Open Group精…

如何解决Windows本地微服务并发启动后端口占用问题

在微服务架构中&#xff0c;经常会遇到本地开发时多个服务需要并行运行&#xff0c;而断开服务后由于某些原因导致端口未正确释放&#xff0c;再次启动服务时发现端口被占用的问题。这会阻碍开发进度&#xff0c;解决这一问题非常关键。本文将详细指导你如何在Windows环境下解决…

SQL Server指南:从入门到进阶实战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Java面试必问题52:(高级面试篇)MongoDB的详细解释以及他的用法以及他跟Redis的区别以及优势

1. 非结构化数据存储&#xff1a;MongoDB是一个面向文档的NoSQL数据库&#xff0c;它不需要定义固定的数据模式&#xff0c;适用于存储不同结构和半结构化的数据&#xff0c;如日志、JSON文档、传感器数据等。 2. 可扩展性和高性能&#xff1a;MongoDB采用分布式架构&#xff0…

PaddleSeg (2) 模型训练

已处理好数据集和配置文件,可以开始模型训练。 启动训练 python tools/train.py --config configs/xxx.yml --do_eval --use_vdl --save_interval 500 --save_dir output/xxx上述训练命令解释:* `--config`

为什么堆排序的时间复杂度是O(N*logN)?

目录 前言&#xff1a; 堆排序&#xff08;以排升序为例&#xff09; 步骤&#xff08;用大根堆&#xff0c;倒这排&#xff0c;排升序&#xff09;&#xff1a; 1.先把要排列的数组建立成大根堆 2.堆顶元素&#xff08;82&#xff09;和最后一个元素交换&#xff08;2&…

华为OD机试真题-亲子游戏-2024年OD统一考试(C卷D卷 )

题目描述: 宝宝和妈妈参加亲子游戏,在一个二维矩阵(N*N)的格子地图上,宝宝和妈妈抽签决定各自的位置,地图上每个格子有不同的糖果数量,部分格子有障碍物。 游戏规则是妈妈必须在最短的时间(每个单位时间只能走一步)到达宝宝的位置,路上的所有糖果都可以拿走,不能走障…

HYBBS表白墙爆款源码!轻松搭建表白墙网站,更可一键封装成APP,让爱传递无界限

PHP表白墙网站源码&#xff0c;适用于校园内或校区间使用&#xff0c;同时支持封装成APP。告别使用QQ空间的表白墙。 简单安装&#xff0c;只需PHP版本5.6以上即可。 通过上传程序进行安装&#xff0c;并设置账号密码&#xff0c;登录后台后切换模板&#xff0c;适配手机和PC…

计算机网络——应用层协议(1)

在这篇文章初识网络中&#xff0c;我介绍了关于计算机网络的相关知识&#xff0c;以及在这两篇文章中Socket编程和Socket编程——tcp&#xff0c;介绍了使用套接字在两种协议下的网络间通信方式。本篇文章中我将会进一步介绍网络中网络协议的部分&#xff0c;而这将会从应用层开…

[网络编程]socket嵌套字的一些常用接口

目录 一、socket常用接口 1.sockaddr_in 2.socket 3. bind 4.listen 5.accept 6.connect 7.send 8.sendto 9.recv 10.recvfrom 11.close 二、 字节序之间的转换函数 1. inet_ntoa 2. inet_aton 3.inet_addr 4.inet_pton 5.inet_ntop 6.htons 7.ntohs…

[SWPUCTF 2022 新生赛]ez_ez_unserialize

要绕过wakeup函数&#xff0c;只要序列化的中的成员数大于实际成员数&#xff0c;即可绕过。 <?php class X {public $x fllllllag.php; }$anew X(); echo serialize($a); O:1:“X”:1:{s:1:“x”;s:13:“fllllllag.php”;} 修改为 O:1:“X”:3:{s:1:“x”;s:13:“flllll…

NASA数据集—— ACRIMSAT 卫星上的 ACRIM 仪器以快门周期形式收集的 2 级太阳总辐照度

ACRIM III Level 2 Shutter Cycle Data V001 简介 ACR3L2SC_1 是主动空腔辐射计辐照度监测仪&#xff08;ACRIM&#xff09;III 2 级快门周期数据第 1 版产品&#xff0c;包含由 ACRIMSAT 卫星上的 ACRIM 仪器以快门周期形式收集的 2 级太阳总辐照度。 摘要 ACRIMSAT卫星上…

爬虫工具-推广-推广链接

爬虫工具是一种用于自动化获取联网上数据的软件程序。它可以模拟人类在网页上的操作&#xff0c;通过发送HTTP请求获取网页内容&#xff0c;并从中提取所需的数据。以下是一些常用的爬虫工具&#xff1a; Scrapy&#xff1a;Scrapy是一个基于Python的开源爬虫框架&#xff0c;它…

【Java--数据结构】“从扑克到程序:深入探讨洗牌算法的原理与魅力“

前言 以下是学习Java顺序表的一个实例应用———简单的洗牌算法。 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 前言 定义每张扑克牌的属性 生成一副扑克牌&#xff08;不包含大小王&#xff09; 洗牌方法 发牌方…

邂逅JavaScript逆向爬虫-------基础篇之深入JavaScript运行原理以及内存管理

目录 一、JavaScript运行原理1.1 前端需要掌握的三大技术1.2 为什么要学习JavaScript1.3 浏览器的工作原理1.4 浏览器的内核1.5 浏览器渲染过程1.6 认识JavaScript引擎1.7 V8引擎以及JavaScript的执行过程1.8 V8引擎执行过程 二、JavaScript的执行过程2.1 初始化全局对象2.2 执…

PCB上有哪些元素

过孔&#xff1a;是用来切换层的 丝印&#xff1a;就是标记&#xff08;白色的线或者符号&#xff09; 焊盘&#xff1a;焊接元器件&#xff0c;相当于线头&#xff0c;连接各个元件 通孔埋孔盲孔&#xff0c;都是用来换层&#xff0c;内部没有桐&#xff0c;是用来固定的 线路…

【pycharm】调试模式中四个常用按钮介绍

【pycharm】调试模式中四个常用按钮介绍 在 PyCharm 的调试模式中&#xff0c;有四个常用的按钮&#xff0c;它们的功能如下&#xff1a; Step Over (F8)&#xff1a;单步执行&#xff0c;但在遇到函数调用时&#xff0c;不会进入函数内部&#xff0c;而是将整个函数作为一步执…

从0到1—POC编写基础篇(二)

接着上一篇 POC常用基础模块 urllib 模块 Python urllib 库用于操作网页 URL&#xff0c;并对网页的内容进行抓取处理。 urllib 包 包含以下几个模块&#xff1a; ●urllib.request - 打开和读取 URL。 ●urllib.error - 包含 urllib.request 抛出的异常。 ●urllib.parse - …

VUE DPlayer编译

源码 GitHub - DIYgod/DPlayer: :lollipop: Wow, such a lovely HTML5 danmaku video player 检查npm/nodejs 两个要配套。我的npm是8.5&#xff0c;nodejs是16 具体参考&#xff1a; 手动安装nodejs-CSDN博客 准备 npm i 编译 npm run build

电脑特别卡,但是看cpu和内存使用量并不大,该如何提升电脑运行速度

1.清理磁盘空间&#xff1a; 检查硬盘空间使用情况&#xff0c;确保有足够的可用空间。使用磁盘清理工具删除不需要的文件。 2.关闭不必要的启动项&#xff1a; 通过任务管理器&#xff08;在 Windows 中可以通过右键点击任务栏并选择“任务管理器”&#xff09;禁用不必要的启…