ElementUI RUOYI 深色适配

news/2025/1/12 18:51:57/

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/news/1443422.html

相关文章

美国服务器vs香港服务器,哪个网站部署打开更快一些?

网站打开速度受多种因素影响&#xff0c;包括服务器地理位置、网络质量、带宽等。用户距离服务器越近&#xff0c;访问速度越快。对于中国大陆用户而言&#xff0c;香港的服务器可能会提供更快的网站访问体验&#xff0c;因为香港距离大陆较近&#xff0c;且网络连接通常较好。…

【SpringCloud】LoadBalance负载均衡服务调用快速入门

【SpringCloud】LoadBalance负载均衡服务调用快速入门 文章目录 【SpringCloud】LoadBalance负载均衡服务调用快速入门1. 概述2. 引入依赖3. 配置、验证3.1 配置3.2 验证 1. 概述 官网地址&#xff1a;点击跳转 Spring Cloud LoadBalancer 是由 SpringCloud 官方提供的一个开…

ArcGIS批量寻找图层要素中的空洞

空洞指的是图层中被要素包围所形成的没有被要素覆盖的地方&#xff0c;当图层要素数量非常庞大时&#xff0c;寻找这些空洞就不能一个一个的通过目测去寻找了&#xff0c;需要通过使用工具来实现这一目标。 一、【要素转线】工具 利用【要素转线】工具可以将空洞同图层要素处于…

Spring Boot | Spring Boot “自定义“ Redis缓存 “序列化机制“

目录: Spring Boot "自定义" Redis缓存 "序列化机制" &#xff1a;一、基于 "注解" 的 "Redis缓存管理" 的 "默认序列化机制" 和 "自定义序列化机制"1.1 基于 "注解" 的 "Redis缓存管理" 的 …

前端调用WebSocket协议接口获取数据

目录 封装调用ws协议接口工具函数 页面调用 封装调用ws协议接口工具函数 params&#xff1a;请求参数cb&#xff1a;服务器请求成功返回数据的回调函数 function createWs(params, cb) {const ws new WebSocket("ws://124.222.224.186:8800");let timer null;// …

Linux初识

一、实验目的 1、掌握Vmware中运行Linux系统的基本方法&#xff1b; 2、了解Linux终端Shell的基本使用方法&#xff1b; 3、了解Vmware虚拟机中NAT虚拟网络接口的功能与设置&#xff1b; 4、了解ssh远程登陆协议的功能&#xff1b; 5、掌握通过SecurCRT或putty登陆Linux主…

CSS渐变色理论与分类、文字渐变色方案、炸裂渐变色方案以及主流专业渐变色工具网站推荐

渐变色彩可以增加视觉层次感和动态效果&#xff0c;使网页界面更加生动有趣&#xff0c;吸引用户注意力。另外&#xff0c;相较于静态背景图片&#xff0c;CSS渐变无需额外的HTTP请求&#xff0c;减轻服务器负载&#xff0c;加快页面加载速度&#xff1b;同时CSS渐变能够根据容…

三、Flask模型基础

ORM 创建模型 # exts.py&#xff1a;插件管理 # 扩展的第三方插件 # 1.导入第三方插件 from flask_sqlalchemy import SQLAlchemy # ORM插件 from flask_migrate import Migrate # 2. 初始化 db SQLAlchemy() # ORM migrate Migrate() # 数据迁移 # 3. 和app对象绑定 def…