ElementUI RUOYI 深色适配

ops/2024/12/23 5:22:08/

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.ppmy.cn/ops/22422.html

相关文章

41. UE5 RPG 设置火球术的碰撞类型

在上一篇中&#xff0c;我们设置了火球术从发射到击中敌人的整个周期使用的音效和特效&#xff0c;现在看上去它像一个真正的火球术了。在这一篇文章里面&#xff0c;我们主要解决一下火球术碰撞的问题&#xff0c;现在已知的问题是&#xff0c;有些不需要和火球产生碰撞的物体…

iOS 模拟请求 (本地数据调试)

简介 在iOS 的日常开发中经常会遇到一下情况&#xff1a;APP代码已编写完成&#xff0c;但后台的接口还无法使用&#xff0c;这时 APP开发就可能陷入停滞。此时iOS 模拟请求就派上用场了&#xff0c;使用模拟请求来调试代码&#xff0c;如果调试都通过了&#xff0c;等后台接口…

代谢组数据分析四:功能分析

Functional Analysis 代谢物通路包含了基因、催化酶或代谢物等上下游关系的先验知识,通过将关心的代谢物比对到通路上,再根据如超级几何分析等数学方法计算受影响的代谢物是否能够影响通路。 代谢物富集分析的目的是为了解析某些差异代谢物是否落在某些pathway上(可简单理…

深入探索 MySQL:成本模型解析与查询性能优化

MySQL作为最流行的关系型数据库管理系统之一&#xff0c;在各种应用场景中都有着广泛的应用。 然而&#xff0c;在处理大规模数据时&#xff0c;查询性能往往成为了关注焦点。 本文将深入探讨MySQL的成本模型&#xff0c;解析其工作原理&#xff0c;并提供一系列优化策略&…

Jenkins持续化集成

优质博文&#xff1a;IT-BLOG-CN 工作过程如下环境准备 开发人员提交代码>jenkins获取代码>调用单元测试>打包>发布 环境准备Jenkins的安装 Tomcat、Maven、Git或Svn、Jdk Jenkins的安装 1、官网下载war &#xff1a;http://Jenkins-ci.org/ 2、tomcat-users.…

《AI音频类工具之二——​ 讯飞智作》

一.简介 官网:讯飞智作-提供文字转语音-语音合成-国内专业的一站式配音服务平台 讯飞智作是科大讯飞推出的一款基于人工智能技术的智能写作与配音工具,旨在利用自然语言处理、机器学习、深度学习等技术,帮助用户高效生成高质量的文本和音视频内容。 在文本写作方面,讯飞…

使用零拷贝技术加速视频图像操作

不使用cv::cuda::HostMem的情况 当直接创建cv::cuda::GpuMat并从CPU内存拷贝数据到GPU时&#xff0c;如果没有共享内存机制&#xff0c;数据传输是通过常规的内存拷贝完成的&#xff0c;例如&#xff1a; uchar* nv12Data; // CPU内存中的NV12数据 cv::Mat hostImage(height …

牛客NC86 矩阵元素查找【中等 分治,减治 C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/3afe6fabdb2c46ed98f06cfd9a20f2ce 思路 选择左下角为起点&#xff0c;以下展示了「减治」的过程。 搜索的规律是&#xff1a;如果当前数比目标元素小&#xff0c;当前列就不可能存在目标值&#xff0c;「指针」…