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

前端主题切换方案——CSS变量

news 2026/5/22 7:59:54

前言

主题切换是前端开发中老生常谈的问题，本文将介绍主流的前端主题切换实现方案——CSS变量

CSS变量

简介

编写CSS样式时，为了避免代码冗余，降低维护成本，一些CSS预编译工具（Sass/Less/Stylus）等都支持了CSS变量，随着这些工具的流行，W3C也开始制定CSS变量规范，目前几乎所有主流浏览器都已经支持
在这里插入图片描述

变量与主题

有了变量，我们就可以使用变量名存储不同的值来表示不同的主题

/** 白昼主题 */
--light-bg-color: #ffffff;
--light-text-color: #000000;
...
/** 暗黑主题 */
--dark-text-color: #000000;
--dark-bg-color: #ffffff;
...

主题切换

上面只是定义了一堆变量组织成了主题集合，要将其用在项目中，目前主流的做法是在根元素上定义一个dataset: <html lang="en" data-theme="light | dark">，通过选择器我们可以有如下组织形式：

/** 白昼主题 */
:root[data-theme=light]{--bg-color: #ffffff;--text-color: #000000;
}
/** 暗黑主题 */
:root[data-theme=dark]{--bg-color: #000000;--text-color: #ffffff;
}

通过切换根元素定义的data-theme，即可使用到变量的地方拥有切换主题的能力

附

现代工程化中为了更好更便利的书写CSS，通常会引入预处理器将书写的文件编译成CSS，而预处理器能提供强大的语法功能，所以也有利用预处理器实现主题切换的方案，本质上是通过预处理器便利的语法编译成多套CSS文件

相关文章：

前端主题切换方案——CSS变量

前言 主题切换是前端开发中老生常谈的问题&#xff0c;本文将介绍主流的前端主题切换实现方案——CSS变量 CSS变量 简介 编写CSS样式时&#xff0c;为了避免代码冗余&#xff0c;降低维护成本&#xff0c;一些CSS预编译工具&#xff08;Sass/Less/Stylus&#xff09;等都支…...

编程日记 2023/8/7 8:07:02

Java8 list多属性去重

大家好&#xff0c;我是三叔&#xff0c;很高兴这期又和大家见面了&#xff0c;一个奋斗在互联网的打工人。 在 Java 开发中&#xff0c;我们经常会面临对 List 中的对象属性去重的需求。然而&#xff0c;当需要根据多个属性来进行去重时&#xff0c;情况会稍微复杂一些。本篇…...

编程日记 2023/8/7 8:05:59

kafka-保证数据不重复-生产者开启幂等性和事务的作用？

1. 生产者开启幂等性为什么能去重&#xff1f; 1.1 场景 适用于消息在写入到服务器日志后&#xff0c;由于网络故障&#xff0c;生产者没有及时收到服务端的ACK消息&#xff0c;生产者误以为消息没有持久化到服务端&#xff0c;导致生产者重复发送该消息&#xff0c;造成了消…...

编程日记 2023/8/7 8:04:58

[AI in security]-214 网络安全威胁情报的建设

文章目录 1.什么是威胁情报2. 威胁情报3. 智能威胁情报3.1 智能威胁情报的组成3.2 整合威胁情报3.3 最佳实践4. 威胁情报的作用5.威胁情报模型6.反杀链模型7.基于TI的局部优势模型参考文献相关的研究1.什么是威胁情报 威胁情报是循证知识，包括环境、机制、指标、意义和可行性…...

编程日记 2023/8/7 8:03:57

Javaweb学习（2）

Javaweb学习 一、Maven1.1 Maven概述1.2 Maven简介1.3、Maven基本使用1.4、IDEA配置Maven1.6、依赖管理&依赖范围 二、MyBatis2.1 MyBatis简介2.2 Mybatis快速入门2.3、解决SQL映射文件的警告提示2.4、Mapper代理开发 三、MyBaits核心配置文件四、 配置文件的增删改查4.1 M…...

编程日记 2023/8/7 8:02:54

leetcode410. 分割数组的最大值 动态规划

hard:https://leetcode.cn/problems/split-array-largest-sum/ 给定一个非负整数数组 nums 和一个整数 m &#xff0c;你需要将这个数组分成 m 个非空的连续子数组。 设计一个算法使得这 m 个子数组各自和的最大值最小。 示例 1&#xff1a;输入&#xff1a;nums [7,2,5,1…...

编程日记 2023/8/7 8:01:53

C函数指针与类型定义

#include <stdio.h> #define PI 3.14 typedef int uint32_t; /* pfun is a pointer and its type is void (*)(void) */ void (*pfun)(void); /* afer typedef like this we can use “pfun1” as a data type to a function that has form like&#xff1a; / -------…...

编程日记 2023/8/7 8:00:52

最新2024届【海康威视】内推码【GTK3B6】

最新2024届【海康威视】内推码【GTK3B6】 【内推码使用方法】 1.请学弟学妹们登录校招官网&#xff0c;选择岗位投递简历&#xff1b; 2.投递过程中填写内推码完成内推步骤&#xff0c;即可获得内推特权。 内推码&#xff1a;GTK3B6 内推码&#xff1a;GTK3B6 内推码&…...

编程日记 2023/8/7 7:59:51

边写代码边学习之LSTM

1. 什么是LSTM 长短期记忆网络 LSTM&#xff08;long short-term memory&#xff09;是 RNN 的一种变体&#xff0c;其核心概念在于细胞状态以及“门”结构。细胞状态相当于信息传输的路径&#xff0c;让信息能在序列连中传递下去。你可以将其看作网络的“记忆”。理论上讲&a…...

编程日记 2023/8/7 7:58:49

Elasticsearch8.8.0 SpringBoot实战操作各种案例(索引操作、聚合、复杂查询、嵌套等)

Elasticsearch8.8.0 全网最新版教程 从入门到精通 通俗易懂 配置项目 引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency><dependency>&l…...

编程日记 2023/8/7 7:57:47

《MySQL高级篇》十五、其他数据库日志

文章目录 1. MySQL支持的日志1.1 日志类型1.2 日志的弊端 2. 慢查询日志(slow query log)3. 通用查询日志3.1 问题场景3.2 查看当前状态3.3 启动日志3.4 查看日志3.5 停止日志3.6 删除\刷新日志 4. 错误日志(error log)4.1 启动日志4.2 查看日志4.3 删除\刷新日志4.4 MySQL8.0新…...

编程日记 2023/8/7 7:56:46

【Linux】【预】配置虚拟机的桥接网卡+nfs

【Linux】【预】配置虚拟机的桥接网卡 1. 配置VM虚拟机的桥接网络2 配置Win10中的设置3.配置Linux中的IP4. 串口连接开发板&#xff0c;配置nfs5 修改网络文件6 验证nfs 是否成功总结 1. 配置VM虚拟机的桥接网络 右击设置&#xff0c;选择添加网络&#xff0c;按照如下顺序操作…...

编程日记 2023/8/7 7:55:44

【Android】Retrofit2和RxJava2新手快速上手

写这篇博客的目的 网上关于Retrofit2和RxJava2的博客特别多&#xff0c;但是内容特别复杂&#xff0c;一上来就讲解很高级的用法 其实我们没必要像高考做题家一样&#xff0c;把每个API都背的滚瓜烂熟 熟悉基本用法&#xff0c;高阶用法需要的时候再逐个了解就行了 因为博客…...

编程日记 2023/8/7 7:54:43

1.4 Nacos注册中心

目录 什么是Nacos Nacos下载和安装 下载和安装 启动 Nacos服务注册与发现 Nacos的服务分级存储模型 什么是分级存储模型 配置实例集群 配置同集群优先的负载均衡 权重配置 点击编辑按钮 配置所需的权重 环境隔离 创建namespace 什么是Nacos Nacoshttps://nacos.i…...

编程日记 2023/8/7 7:53:41

AOJ 2200 Mr. Rito Post Office 最短路径+动态规划+谨慎+思维

我写了好多注释&#xff0c;一看就能看懂&#xff0c;这个题目我想了6&#xff0c;7个小时&#xff0c;一开始忽略了船的位置和要把船安置的位置一致的情况&#xff0c;补上就对了。 #include <iostream> using namespace std; int inf 0x3f3f3f3f, num[1007], dp[1007…...

编程日记 2023/8/7 7:52:39

红米电视 ADB 安装 app 报错 failed to authenticate xxx:5555

开启电视开发者模式&#xff0c;允许安装未知来源应用及开启 ADB 调试电脑端下载 adb 工具 点击下载同一局域网的电脑使用 adb 工具连接&#xff08;提前查看电视 IP&#xff09;D:\adb>adb connect 192.168.1.7 * daemon not running; starting now at tcp:5037 * daemon s…...

编程日记 2023/8/7 7:51:37

Linux 下设置开机自启动的方法

文章目录 事先准备对于普通的 Linux对于 RedHat Enterprise Linux 9 笔者的运行环境&#xff1a; 设置成功过的 Linux&#xff1a; RedHat Enterprise Linux 9 x86_64 CentOS 8 x86_64 事先准备 进行这个教程之前&#xff0c;必须要先安装好一个 Linux 操作系统。这个 Linux…...

编程日记 2023/8/7 7:50:36

MySQL常见问题处理(三)

MySQL 常见问题解决 夕阳留恋的不是黄昏&#xff0c;而是朝阳 上一章简单介绍了MySQL数据库安装(二), 如果没有看过, 请观看上一章 一. root 用户密码忘记&#xff0c;进行重置操作 复制内容来源链接: https://blog.csdn.net/weixin_48927364/article/details/123556927 一.…...

编程日记 2023/8/7 7:49:34

maven中常见问题

文章目录 一、配置项提示二、父子打包三、打包之后不显示target四、自定义打包之后的jar包名称五、整个项目打包5.1、父项目管理插件和微服务打包 一、配置项提示 SpringBoot中提示错误信息 表示的是SpringBoot中的注释提示没有配置&#xff01;那么可以来使用一下springboot官…...

编程日记 2023/8/7 7:48:31

vue2中bus的使用

说明&#xff1a;为了解决组件间的通信&#xff0c;也就是组件与组件间的数据传递(它们之间毫无关系)&#xff1b; 这里以组件1传递数据到组件2为例 1.首先新建一个Bus.js文件 import Vue from vue const Bus new Vue() export default Bus 2.在组件1中引用 传递数据 imp…...

编程日记 2023/8/7 7:47:31

AV1编码背景及现状

AV1&#xff08;AOMedia Video 1&#xff09;是一种开放的、免版税的视频编码标准&#xff0c;由开放媒体联盟开发。该标准的最初设计目的是用于互联网上的视频传输&#xff0c;同时提供一个对所有用户开放且无须支付版税的视频压缩解决方案。作为 VP9的下一代视频编码标准&…...

编程新知 2026/5/22 7:55:39

Delft3D建模、水动力模拟方法及地表水环境影响评价：岸线绘制与导入、非结构化计算网格生成、水下地形数据处理等前处理操作；水动力与污染物对流扩散模拟的参数设置、边界条件设定及模型率定验证

查看原文>>>https://mp.weixin.qq.com/s/_CiPDK_oXaAGxVfu2qk6ew 前言 本文以地表水数值模拟软件Delft3D 4.03.00操作为主要内容&#xff0c;强调地表水水动力建模、基础资料的获取、边界条件设定、模型率定和验证、数据分析和处理等关键环节。通过对案例模型的实操…...

编程新知 2026/5/22 6:39:30

无监督聚类挖掘声音语义：从音乐描述文本发现认知规律

1. 这不是传统聚类&#xff0c;而是一场对“声音语言”的考古式挖掘你有没有试过听一首歌&#xff0c;然后被某段音色击中——那种“像融化的玻璃糖纸裹着雨滴坠落”的感觉&#xff1f;或者在音乐评论区刷到“低频像沉入深海的青铜钟”“人声有未拆封的羊皮纸质感”这类描述&am…...

编程新知 2026/5/22 5:17:14

YOLOv11光伏板二极管异常目标检测数据集-45张-Solar-panel-anomalies-1

YOLOv11光伏板二极管异常目标检测数据集 &#x1f4ca; 数据集基本信息 目标类别&#xff1a; [‘Diode anomaly’, ‘Hot Spots’, ‘Reverse polarity’]中文类别&#xff1a;[‘二极管异常’, ‘热点’, ‘反向极性’]训练集&#xff1a;31 张验证集&#xff1a;9 张测试集&…...

编程新知 2026/5/22 3:22:08

谷歌 I/O 开发者大会亮点多：Gemini Spark、YouTube 搜索等新功能来袭！

谷歌 I/O 开发者大会拉开帷幕 谷歌年度 I/O 开发者大会于周二在加利福尼亚州山景城拉开帷幕&#xff0c;会上发布了众多新的 AI 功能、硬件和工具。记者在现场通过 CNET 的实时博客报道了每一项更新。以下是一些亮点回顾。 Gemini Spark 任务自动化 AI 是今年谷歌 I/O 大会的核…...

编程新知 2026/5/22 2:58:01

商业设计复盘｜法式肉制品包装升级逻辑：如何用视觉解决进口品牌本土化痛点

&#x1f4d6; 前言&#xff1a;肉制品行业的视觉同质化困境在快消品商业设计领域&#xff0c;高端肉制品、法式肉制品一直是极具代表性的细分赛道。随着消费升级&#xff0c;用户选购逻辑从“看价格、看食材”转变为看视觉、看透明化、看品牌调性。但纵观目前国内市场&#xf…...

编程新知 2026/5/22 1:44:23

通用异步导出服务设计：从业务功能到平台基础能力的抽象

在后台管理系统中&#xff0c;“导出 Excel”几乎是一个绕不开的功能。看似只是点击一个按钮、下载一个文件&#xff0c;背后却经常隐藏着性能、稳定性、安全性和用户体验问题。 当数据量较小时&#xff0c;同步导出通常可以满足需求。但随着业务数据规模增长&#xff0c;导出操…...

编程新知 2026/5/22 1:40:14

2026免费在线去水印软件推荐：优缺点对比与测评

在2026年&#xff0c;处理带有水印的图片、视频和文档已经成为许多人日常工作中的常见需求。无论是内容创作者、自媒体运营者&#xff0c;还是普通用户&#xff0c;偶尔都需要从素材中移除水印。本文将全面介绍当前免费在线去水印软件的最新情况&#xff0c;帮助你了解各工具的…...

编程新知 2026/5/22 1:28:07

野兽派不是乱来：拆解Midjourney V6中色彩暴力、笔触失序与构图反叛的5层参数逻辑

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;野兽派不是乱来&#xff1a;Midjourney V6的美学暴动宣言 Midjourney V6 不是一次平滑迭代&#xff0c;而是一场蓄谋已久的视觉政变——它将“语义精确性”与“风格不可预测性”焊死在同一张提示词底片上。当 …...

编程新知 2026/5/22 1:02:45

2026年免费照片去水印软件App排行榜｜去水印App推荐和评测指南

照片被水印困扰是很多用户的常见问题。无论是保存网络上的精美图片、处理工作资料&#xff0c;还是制作个人素材库&#xff0c;去水印都是一个实用的需求。本篇文章根据2026年最新的工具体验&#xff0c;为你梳理免费照片去水印软件app有哪些、各类去水印App怎么选择&#xff0…...

编程新知 2026/5/22 0:05:36