前端换肤,聊一聊主题切换那些事

news/2024/10/30 9:24:15/

一些网站通常会提供白天、夜间模式,以及自定义主题等等,这种主题切换也就是本文说的前端换肤。
这次案例用的是白天和夜间模式的切换,在做换肤之前,得先知道一件事情:css的变量定义,对变量定义不熟悉的同学请看MDN文档:自定义属性(–*):CSS 变量

主题切换也就是样式的切换,白天和黑夜的模式切换需要准备两套样式,我们通过css的变量定义,全局访问这些公共变量就可以实现主题切换。
此处我已经准备好了样式:

/*style.css*/
/* 基本样式 */
:root {--theme-background: #ecf5ff; /*背景色*/--theme-menuBackground : #fff; /*菜单颜色*/--theme-menuIcon : #303133; /*菜单icon*/
}/* 黑夜模式 */
html[theme-colors='dark'] {--theme-background: #1b1b1b;  /*背景色*/--theme-menuBackground : #343434; /*菜单颜色*/--theme-menuIcon : #cdcdcd; /*菜单icon*/--theme-activeColor : #97a1fe;
}
/* 白天 */
html[theme-colors='white'] {--theme-background: #ecf5ff; /*背景色*/--theme-menuBackground : #fff; /*菜单颜色*/--theme-menuIcon : #303133; /*菜单icon*/--theme-activeColor : #97a1fe;
}

默认情况用:root定义的样式,黑夜模式用dark,白天用white

公共样变量定义后,我们就可以到页面使用了,例如设置卡片的背景色:

.card {background: var(--theme-background); 
}

此时访问的是:root中的默认变量,我们需要做到根据按钮切换,访问不同主题下的变量

<!-- 换肤 -->
<el-switchv-model="theme"inline-promptstyle="--el-switch-on-color: #13ce66; --el-switch-off-color: #97a0ff":active-icon="Sunny":inactive-icon="Moon"@change="themeChange"
/>
// 主题切换
const theme = ref<boolean>(true);
const themeChange = (val : boolean) => {// true白天 false夜晚if(val){document.querySelectorAll('html')[0].setAttribute('theme-colors','white')} else {document.querySelectorAll('html')[0].setAttribute('theme-colors','dark')}
}

setAttribute()设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。如果要切换夜间模式,我们可以给html设置一个属性为theme-colors = dark,此时我们就可以访问html[theme-colors='dark']下的css变量了
,白天模式切换theme-colors = white即可。
在这里插入图片描述
在做项目之前我们可以考虑到这一点,否则后期页面都写好了再改会比较麻烦。如果用了前端框架的话,我们需要覆盖框架自带的样式,我们可以将覆盖的样式写成公共文件,全局引入或者在对应页面引入即可。


如果觉得这篇文章对你有帮助,欢迎点赞👍、收藏💖、转发✨哦~


http://www.ppmy.cn/news/70253.html

相关文章

Android MVVN 使用入门

MVVM&#xff08;Model-View-ViewModel&#xff09;是一种基于数据绑定的设计模式&#xff0c;它与传统的 MVC 和 MVP 模式相比&#xff0c;更加适合处理复杂的 UI 逻辑和数据展示。在 Android 开发中&#xff0c;MVVM 通常使用 Data Binding 和 ViewModel 实现。 下面是一个简…

小黑子—Java从入门到入土过程:第九章-IO流

Java零基础入门9.0 Java系列第九章- IO流1. 初识IO流2. IO流的体系2.1 字节流2.1.1 FileOutputStream 字符串输出流2.1.1 - I 字符串输出流的细节2.1.1 - II FileOutputStream写数据的3种方式2.1.1 -III FileOutputStream写数据的两个小问题 2.1.2 FileInputStream 字符串输入流…

Vue3 实现模态框组件

基于 Vue 3 实现模态框&#xff0c;并且单击遮罩层可关闭模态框 下面是一个基于 Vue 3 实现的模态框&#xff0c;并且点击遮罩层可关闭模态框的示例代码&#xff1a; <template><div class"modal-wrapper" v-show"visible" click.self"clos…

Mysql中select语句的执行流程?

Mysql中select语句的执行流程&#xff1f; 答&#xff1a; SELECT 语句的执行过程为&#xff1a;连接、查询缓存、a词法分析&#xff0c;语法分析&#xff0c;语义分析&#xff0c;构造执行树&#xff0c;生成执行计划、执行器执行计划&#xff0c;下面开始梳理一次完整的查询…

对SRC并发漏洞挖掘的思考

对SRC并发漏洞挖掘的思考 1.burpsuite Turbo插件使用2.并发点赞测试3.并发验证码测试4.某代金券逻辑测试5.有限制的并发验证码绕过6.对于并发漏洞的思考 1.burpsuite Turbo插件使用 Turbo Intruder是一个用于发送大量HTTP请求并会分析其结果的Burp Suite扩展。它旨在补充Burp …

JWT 入门

1.介绍 JSON Web Token&#xff08;JWT&#xff09;是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。该token被设计为紧凑且安全的&#xff0c;特别适用于分布式站点的单点登录&#xff08;SSO…

网络编程 lesson4 linux下的IO模型和特点

目录 阻塞式IO 工作流程 非阻塞式IO 工作流程 设置非阻塞IO方法 fcntl实例 信号驱动IO 工作流程 实例&#xff1a;在LINUX下检听自己鼠标的动作 IO多路复用&#xff08;重点&#xff0c;难点&#xff09; 工作流程 本文核心内容&#xff01;&#xff01;&#xff01…

自动化测试 —— Airtest

最近在做APP自动化过程中&#xff0c;有调研Airtest框架的使用&#xff0c;便初步介绍一下Airtest框架的使用&#xff0c;有兴趣的小伙伴&#xff0c;可以一起探讨学习~ (一&#xff09;背景 Airtest是什么&#xff1f; Airtest是一款基于Python的、跨平台的UI自动化测试框架&…