当前位置： 首页 > news >正文

前端主题切换的多种方式

news 2026/5/13 0:33:19

动态link标签加载不同主题css

**原理：**提前准备好几套CSS主题样式文件，在点击切换主题时，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。
缺点：
动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅
维护不便！

**优点：**实现了按需加载，提高了首屏加载时的性能且兼容性好

  1. 先创建主题css文件dark.css、light.css等
  2. html中link引入
<head><link rel="stylesheet" href="./css/dark.css" ><link rel="stylesheet" href="./css/light.css" disable>
</head>
  1. 切换主题
const themesCssSheet = [document.querySelector("link[data-theme='light']"),document.querySelector("link[data-theme='dark']"),
]
btn.addEventlistner("click",()=>{const dataTheme = btn.getAttribute("data-theme")themesCssSheet.forEach(theme=>{t.disable = theme.dataset.theme === dataTheme })
})

提前引入不同主题的css样式，通过切换类名切换主题

  1. 定义好css样式
/* light样式主题 */
body{color: #f90;background: #fff;--text-color:black--header-bg:orange
}
/* dark样式主题 */
.dark {color: #eee;background: #333;--text-color:#fff--header-bg:blue
}
  1. 点击切换主题时 js切换
document.body.classList.toggle("dark")

css预编译器

$themes:(light:(textColor:blackheaderBg:orange),dark:(textColor:#fffheaderBg:blue)
)
$currentTheme:light;
@mixin changeTheme(){@each $key,$value in $themes{$currentTheme:$key !global;html[data-theme='#{$key}'] & {@content;}}
}@function getTextColor(){$currentThemeObj: map-get($themes,$curTheme);@return map-get($currentThemeObj,"textColor");
}
@function getHeaderBg(){$currentThemeObj: map-get($themes,$curTheme);@return map-get($currentThemeObj,"headerBg");
}@function getThemeValue($key){$currentThemeObj: map-get($themes,$curTheme);@return map-get($currentThemeObj,$key);
}
.content{width:100%;height:100%;@changeTheme{textColor:getTextColor();headerBg:getHeaderBg();}
}

基于CSS变量(最优方式)

原理：根据html元素标签的属性切换所使用的主题变量。
缺点：IE兼容性不行（基本可以忽略）。
优点：便于维护，基本无需css参与

  1. 定义两套（多主体多套）变量
:root{--text-color:black--header-bg:orange...
}
// 暗色主题
html[data-theme='dark']{--text-color:#fff--header-bg:blue...
}
  1. 在main.js项目入口文件导入该变量，便于组件使用
  2. 组件中主题相关的直接使用变量
  3. 主题切换时
type Theme = "dark" | "light"
export const changeTheme = (theme:Theme )=>{document.documentElement.dataset.theme = theme
}

CSS变量+动态setProperty

  1. 定义变量
:root{--text-color:black--header-bg:orange...
}
  1. 定义js更改属性值方法
export const setCssVar = (prop: string, val: any, dom = document.documentElement) => {dom.style.setProperty(prop, val)
}
// 当样式改变
setCssVar('--text-color', color)

总结

还有其他方式（例如vue3 v-bind css，变量和类名结合），但是总体都大同小异。

相关文章：

前端主题切换的多种方式

动态link标签加载不同主题css **原理&#xff1a;**提前准备好几套CSS主题样式文件&#xff0c;在点击切换主题时&#xff0c;创建link标签动态加载到head标签中&#xff0c;或者是动态改变link标签的href属性。 缺点&#xff1a; 动态加载样式文件&#xff0c;如果文件过大网…...

编程日记 2024/5/11 14:46:08

使用RESTful API构建 web 应用程序

RESTful API是一种基于HTTP协议的架构风格&#xff0c;用于设计网络应用程序的 API。它强调使用标准的HTTP方法&#xff08;如GET、POST、PUT和DELETE&#xff09;对资源进行操作&#xff0c;并使用统一的资源标识符&#xff08;URI&#xff09;来唯一标识每个资源。RESTful AP…...

编程日记 2024/5/11 14:44:06

KaiOS Data PDN 数据建立流程

代码逻辑 APN创建 在 DataCallManager.jsm中，会对所有apnsetting创建一个datacall，其中会包含dataprofile的成员（通过apn参数来创建），在之后的流程用于直接发送到modem建立PDN。 PDN建立 1、DataCallManager.jsm -dcInterface.setupDataCall //RILNetworkInterface.c…...

编程日记 2024/5/11 14:43:04

Mybatis-Plus常用的增删改查坑

添加依赖 <!--实体类上加上Data注解就不用写get&#xff0c;set&#xff0c;toString&#xff0c;equals等方法了--><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional…...

编程日记 2024/5/11 14:42:02

初识指针（4）＜C语言＞

前言 前面的文章&#xff0c;已经对指针的基础概念以及运用有了初步了解&#xff0c;我们可以进一步探究指针比较深入的知识&#xff0c;下文将主要介绍&#xff1a;使用指针数组模拟二维数组、字符指针变量、数组指针、二维数组传参的本质、函数指针、typedef关键字等。 目录…...

编程日记 2024/5/11 14:41:01

pyqt 工具栏QToolBar控件

pyqt 工具栏QToolBar控件 QToolBar控件介绍效果代码 QToolBar控件介绍 QToolBar 是 PyQt&#xff08;中的一个控件&#xff0c;它提供了一个工具栏&#xff0c;通常包含一系列的工具按钮或下拉菜单&#xff0c;用于提供对应用程序功能的快速访问。 QToolBar 通常与 QMainWind…...

编程日记 2024/5/11 14:38:58

SystemVerilog/Verilog中的仿真延时建模之模块路径延时

一 概要 模块路径延迟，描述的是模块中信号从源端到目的端传输的延迟。 路径以及对应的延迟是在模块中的specify块中指定的,其中信号源端一般为input或者inout,而目的端则只能为output或者inout.在specify中指定的模块路径,常见的形式主要三种,分别是： 简单路径(Simple Path…...

编程日记 2024/5/11 14:37:56

代码随想录算法训练营Day36 | 738.单调递增的数字、968.监控二叉树、贪心算法总结 | Python | 个人记录向

本文目录 738.单调递增的数字做题看文章 968.监控二叉树做题看文章 贪心算法总结以往忽略的知识点小结个人体会 738.单调递增的数字 代码随想录&#xff1a;738.单调递增的数字 Leetcode&#xff1a;738.单调递增的数字 做题 无思路。 看文章 例如&#xff1a;98&#xff…...

编程日记 2024/5/11 14:36:54

FME学习之旅---day26

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 【由于上周&#xff0c;上班状态不是很好&#xff0c;事情多又杂&#xff0c;没有学习的劲头&#xff0c;就短暂的休息了一下下。双休爬山&#xff0c;给自己上了强度&#xff0c;今天才缓过来…...

编程日记 2024/5/11 14:35:53

JAVA学习-练习试用Java实现电话号码的字母组合

问题: 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输入&#xff1a;digits "23" 输…...

编程日记 2024/5/11 14:33:50

js代码中关于async await的滥用 async await的滥用

概念&#xff1a; 返回值&#xff1a; async返回一个promise---这个返回值是默认自发行为 async function name1(params) {console.log(params) } let result name1(lion) console.log(result) // Promise { undefined } result.then(res > console.log(res)) // undefin…...

编程日记 2024/5/11 14:32:48

基础算法，贪心算法，贪心策略，OJ练习

文章目录 一、概念二、OJ练习2.1 区间选点2.2 区间合并2.3 区间2.4 合并果子2.5 排队接水2.6 货仓选址2.7 防晒2.8 畜栏预定2.9 雷达设备2.10 国王游戏2.11 耍杂技的牛2.12 给树染色2.13 任务2.14 能量石 三、总结 一、概念 贪心是一种在每次决策时采取当前意义下最优策略的算…...

编程日记 2024/5/11 14:31:47

一文讲透亚马逊云三层架构

关于三层架构&#xff0c;我们有很多想说的话&#xff1a; &#xff08;以下内容以下都在VPC中&#xff09; cloudfront做CDN加速网关规划S3做静态网站托管APIGateway作为统一网关入口认证/限流Lambda 作为传统后端&#xff0c;并发&#xff0c;底层架构Redis缓存DDB作为持久化…...

编程日记 2024/5/11 14:30:45

只需3步，使用Stable Diffusion无限生成AI数字人视频（附安装包）

基本方法 搞一张照片&#xff0c;搞一段语音&#xff0c;合成照片和语音&#xff0c;同时让照片中的人物动起来&#xff0c;特别是头、眼睛和嘴。 语音合成 语音合成的方法很多&#xff0c;也比较成熟了&#xff0c;大家可以选择自己方便的&#xff0c;直接录音也可以&#…...

编程日记 2024/5/11 14:29:44

RustGUI学习（iced）之小部件（七）：如何使用图像image部件来显示图片？

前言 本专栏是学习Rust的GUI库iced的合集，将介绍iced涉及的各个小部件分别介绍，最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个，目前处于发展中（即版本可能会改变），本专栏基于版本0.12.1. 概述 这是本专栏的第七篇，主要讲述图像Image部件的使用，会结合实例…...

编程日记 2024/5/11 14:28:42

Substrate 入门课第 14 期圆满结束，岗位内推直达知名 Web3 项目！

Substrate&#xff0c;一个完全免费且开源的框架&#xff0c;利用 Rust 语言的强大功能和安全性&#xff0c;为全球开发者提供了一个高效和灵活的开发环境。借助其模块化的设计&#xff0c;即使是新手开发者也能在短短 15 分钟内搭建起定制化的区块链。自 2020 年以来&#xff…...

编程日记 2024/5/11 14:27:41

android进阶-AIDL

参考&#xff1a;Android进阶——AIDL详解_android aidl-CSDN博客 AIDL&#xff08;Android 接口定义语言&#xff09;&#xff0c;可以使用它定义客户端与服务端进程间通信&#xff08;IPC&#xff09;的编程接口&#xff0c;在 Android 中&#xff0c;进程之间无法共享内存&…...

编程日记 2024/5/11 14:25:38

贪心算法-活动选择问题背包问题

目录 活动选择问题 无重叠区间-Leetcode 435 分数背包问题--贪心解法 贪心法 0-1 背包问题 贪心法 贪心算法的局限 Set cover problem 活动选择问题 分析: /* 要在一个会议室举办n个活动 - 每个活动有它们各自的起始和结束时间 - 找出在时间上互不冲突的活动组合,能…...

编程日记 2024/5/11 14:24:37

Web3工具集合 - 00

使用 React 和 Material-UI 构建的 Web3 工具集合 大家好&#xff01; 我很高兴向大家介绍我最近刚启动了一个项目&#xff1a;Web3 工具集合。 这个项目的目的是一个集成各种 Web3 工具的网站&#xff0c;旨在为开发人员和加密货币爱好者提供便捷的工具和资源。 特点&#…...

编程日记 2024/5/11 14:22:34

分布式与集群的区别

先说区别&#xff1a; 分布式是并联工作的&#xff0c;集群是串联工作的。 分布式中的每一个节点都可以做集群。而集群并不一定就是分布式的。 集群举例&#xff1a;比如新浪网&#xff0c;访问的人很多&#xff0c;他可以做一个集群&#xff0c;前面放一个相应的服务器&…...

编程日记 2024/5/11 14:19:30

别再只用BigGantt了！这个免费JIRA甘特图插件Gantt Suite，配置简单速度快

轻量高效的JIRA甘特图解决方案&#xff1a;Gantt Suite全面评测与迁移指南 在项目管理领域&#xff0c;甘特图作为可视化排期的黄金标准已有百年历史。然而当这一经典工具遇上现代敏捷开发平台JIRA时&#xff0c;许多团队却陷入了两难境地——要么忍受BigGantt等老牌插件的臃肿…...

编程新知 2026/5/13 0:10:11

ICC II里做CTS，除了点‘clock_opt’，这些隐藏选项你真的都配好了吗？

ICC II时钟树综合实战&#xff1a;CTS隐藏选项配置全解析与QoR调优指南 在超大规模集成电路设计中&#xff0c;时钟树综合&#xff08;CTS&#xff09;的质量直接影响芯片性能、功耗和面积三大关键指标。当项目进展到后期阶段&#xff0c;工程师常会遇到这样的困境&#xff1a;…...

编程新知 2026/5/12 23:50:02

TextInputLayout实战：从属性解析到自定义样式进阶

1. TextInputLayout基础入门&#xff1a;从零开始掌握Material输入框 第一次接触TextInputLayout时&#xff0c;我被它丝滑的浮动提示动画惊艳到了。相比传统的EditText&#xff0c;这个Material Design组件确实能让表单界面瞬间提升好几个档次。记得去年做登录页面重构时&…...

编程新知 2026/5/12 23:33:47

谷歌seo搜索引擎优化教程有吗？只需4步：快速提升关键词前10概率

搜索结果首页占据了超过 94% 的点击流量。如果你的网站排在第二页&#xff0c;那几乎等同于不存在。很多人在寻找 谷歌seo搜索引擎优化教程有吗&#xff1f;只需4步&#xff1a;快速提升关键词前10概率 的答案时&#xff0c;容易被复杂的技术词汇绕晕。提升排名的过程其实是关于…...

编程新知 2026/5/12 22:58:59

乔布斯产品哲学对硬件工程师的启示：从参数到体验的转变

1. 项目概述&#xff1a;一次对乔布斯遗产的技术性致敬2011年10月6日&#xff0c;当史蒂夫乔布斯逝世的消息传来&#xff0c;整个科技界陷入了一种复杂的情绪。作为一名长期在电子工程与消费电子领域工作的人&#xff0c;我的感受尤为深刻。那天&#xff0c;我和我的同事们&…...

编程新知 2026/5/12 22:23:01

从Arrays.fill()到Stream API：Java二维数组初始化的几种高效写法与性能对比

从Arrays.fill()到Stream API&#xff1a;Java二维数组初始化的几种高效写法与性能对比 在算法竞赛和数据处理应用中&#xff0c;二维数组的初始化往往是性能优化的第一个瓶颈。我曾在一个图像处理项目中&#xff0c;因为选择了不当的初始化方式&#xff0c;导致整体性能下降了…...

编程新知 2026/5/12 21:28:58

自然语言编写嵌入式软件之点亮LED灯

要实现的功能&#xff1a; 控制LED以10HZ的频率闪烁 传统实现过程&#xff1a;学C语言&#xff0c;看数据手册了解MCU&#xff0c;学教程&#xff0c;copy代码&#xff0c;学编译调试环境&#xff0c;学仿真&#xff0c;学用仪器测量 自然语言编程实现过程&#xff1a; 搭建…...

编程新知 2026/5/12 21:07:44

深度学习正则化（三）—— 提前终止 + 参数共享 + 稀疏表示（三十）

1. 定位导航 正则化 5 篇中，本篇承前启后： 第 28：参数范数惩罚（L1/L2）— 加在损失函数上 第 29：数据增强、噪声、半监督 — 操作数据 第 30（本篇）：提前终止、参数共享、稀疏表示 — 隐式正则化 第 31：Bagging + Dropout 第 32：对抗训练 + 切面分类 本篇的三个方法表…...

编程新知 2026/5/12 19:22:31

AI教材编写利器！低查重AI写教材工具，快速生成30万字专业教材！

在开始编写教材之前&#xff0c;选择合适的工具真的是一个“非常纠结”的过程&#xff01;如果用常见的办公软件来写&#xff0c;功能太简单&#xff0c;框架设计和格式处理都得自己手动来搞&#xff1b;而要是尝试那些专业的编写工具&#xff0c;又会觉得操作太复杂&#xff0…...

编程新知 2026/5/12 17:50:06

传统认为越早进入行业越占优势，编程统计入行时间，行业红利数据，行业成熟期入行风险更低收益更稳。

“入行时间与行业红利期的匹配关系分析” 为主题&#xff0c;给出一套工程化、可教学、可复现的分析示例。一、实际应用场景描述&#xff08;Business Context&#xff09;在职业规划、行业研究与人才策略中&#xff0c;普遍存在一种观点&#xff1a;“越早进入一个行业&#x…...

编程新知 2026/5/12 16:53:29