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精…

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…

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

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

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

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

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

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

[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…

【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 - …

【八股】计算机网络篇

网络模型 应用层【HTTP&#x1f449;报文/消息】 传输层【TCP或UDP&#x1f449;段&#x1f449;MSS】网络层【IP、寻址和路由&#x1f449;MTU】 ①IP&#xff08;Internet Protocol&#xff0c;网际协议&#xff09;主要作用是定义数据包的格式、对数据包进行路由和寻址&…

React-editor-js not showing up in a function component

React-editor-js not showing up in a function component react-editor-js 在react 函数组件中显示不出来 真的&#xff0c;我马上就想放弃它了。但是看它周下载量还挺多&#xff0c;我不信别人没遇到过。于是我继续在网络上挖呀挖。只是我一开始的方向错了。我一直以为我的写…

6.2 整合MongoDB

6.2 整合MongoDB 1. MongoDB简介2. MongoDB安装2.1 下载2.2 配置MongoDB2.3 MongoDB的启动和关闭1. 启动MongoDB2. 关闭MogoDB 2.4 安全管理 3. 整合SpringBoot3.1 依赖3.2 MongoTemplate使用3.3 测试1. 新增2. 查询3. 删除 *************************************************…

仓库管理存在的问题及改进对策?

大部分人都指导仓库问题会影响一个仓库操作或与之相关的整个流程链的速度、效率和生产力。但在大多数情况下&#xff0c;只有在流程开始甚至完成后才能识别这些错误。 到那时通常已经来不及阻止错误了&#xff0c;甚至可能来不及减少造成的损害。 所以这也是我写这篇内容的目…

[SWPUCTF 2021 新生赛]re2(不同字符加密相同,逆向修改范围)

无壳 直接看ida 完整exp&#xff1a; resultlist(ylqq]aycqyp{) for i in range(len(result)):if (ord(result[i])<94 or ord(result[i])>96) and (ord(result[i])<62 or ord(result[i])>64):result[i]chr(ord(result[i])2)else:result[i]chr(ord(result[i])-24)…

数据结构实验(三)

算法设计 一、判断回文序列 1、算法思路&#xff1a; 输入想要判断的字符串&#xff0c;用数组来存放该字符串&#xff0c;给数组一个最左的下标low,和最右的下标right.比较两端的字符是否相等&#xff0c;如果相等那么low,right--.直到遍历完字符串&#xff0c;如果字符不相…

可持续发展:制造铝制饮料罐要消耗多少资源?

铝制饮料罐是人们经常使用的日常用品&#xff0c;无论是在购物、午休还是在自动售货机前选择喝什么的时候&#xff0c;很少有人会想知道装他们喝的饮料的罐子到底是如何制成的&#xff0c;或者这些铝罐的原材料是如何进出的。 虽然有化学品和一些合金进入铝饮料罐制造过程或成为…

大小端解释以及如何使用程序判断IDE的存储模式

今天让我们来了解一下大小端的概念吧 什么是大小端&#xff1f; 大端&#xff08;存储&#xff09;模式&#xff1a;指的是数据的低位保存在内存的高地址处&#xff0c;而数据的高位则保存在内存的低地址处。 小端&#xff08;存储&#xff09;模式&#xff1a;指的是数据的低位…