前端主题切换方案——CSS变量
前言
主题切换是前端开发中老生常谈的问题，本文将介绍主流的前端主题切换实现方案——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变量
前言 主题切换是前端开发中老生常谈的问题，本文将介绍主流的前端主题切换实现方案——CSS变量 CSS变量 简介 编写CSS样式时，为了避免代码冗余，降低维护成本，一些CSS预编译工具（Sass/Less/Stylus）等都支…...
Java8 list多属性去重
大家好，我是三叔，很高兴这期又和大家见面了，一个奋斗在互联网的打工人。 在 Java 开发中，我们经常会面临对 List 中的对象属性去重的需求。然而，当需要根据多个属性来进行去重时，情况会稍微复杂一些。本篇…...
kafka-保证数据不重复-生产者开启幂等性和事务的作用？
1. 生产者开启幂等性为什么能去重？ 1.1 场景 适用于消息在写入到服务器日志后，由于网络故障，生产者没有及时收到服务端的ACK消息，生产者误以为消息没有持久化到服务端，导致生产者重复发送该消息，造成了消…...
[AI in security]-214 网络安全威胁情报的建设
文章目录 1.什么是威胁情报2. 威胁情报3. 智能威胁情报3.1 智能威胁情报的组成3.2 整合威胁情报3.3 最佳实践4. 威胁情报的作用5.威胁情报模型6.反杀链模型7.基于TI的局部优势模型参考文献相关的研究1.什么是威胁情报 威胁情报是循证知识，包括环境、机制、指标、意义和可行性…...
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…...
leetcode410. 分割数组的最大值 动态规划
hard:https://leetcode.cn/problems/split-array-largest-sum/ 给定一个非负整数数组 nums 和一个整数 m ，你需要将这个数组分成 m 个非空的连续子数组。 设计一个算法使得这 m 个子数组各自和的最大值最小。 示例 1：输入：nums [7,2,5,1…...
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： / -------…...
最新2024届【海康威视】内推码【GTK3B6】
最新2024届【海康威视】内推码【GTK3B6】 【内推码使用方法】 1.请学弟学妹们登录校招官网，选择岗位投递简历； 2.投递过程中填写内推码完成内推步骤，即可获得内推特权。 内推码：GTK3B6 内推码：GTK3B6 内推码&…...
边写代码边学习之LSTM
1. 什么是LSTM 长短期记忆网络 LSTM（long short-term memory）是 RNN 的一种变体，其核心概念在于细胞状态以及“门”结构。细胞状态相当于信息传输的路径，让信息能在序列连中传递下去。你可以将其看作网络的“记忆”。理论上讲&a…...
)
Elasticsearch8.8.0 SpringBoot实战操作各种案例(索引操作、聚合、复杂查询、嵌套等)
Elasticsearch8.8.0 全网最新版教程 从入门到精通 通俗易懂 配置项目 引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency><dependency>&l…...
《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新…...
【Linux】【预】配置虚拟机的桥接网卡+nfs
【Linux】【预】配置虚拟机的桥接网卡 1. 配置VM虚拟机的桥接网络2 配置Win10中的设置3.配置Linux中的IP4. 串口连接开发板，配置nfs5 修改网络文件6 验证nfs 是否成功总结 1. 配置VM虚拟机的桥接网络 右击设置，选择添加网络，按照如下顺序操作…...
【Android】Retrofit2和RxJava2新手快速上手
写这篇博客的目的 网上关于Retrofit2和RxJava2的博客特别多，但是内容特别复杂，一上来就讲解很高级的用法 其实我们没必要像高考做题家一样，把每个API都背的滚瓜烂熟 熟悉基本用法，高阶用法需要的时候再逐个了解就行了 因为博客…...
1.4 Nacos注册中心
目录 什么是Nacos Nacos下载和安装 下载和安装 启动 Nacos服务注册与发现 Nacos的服务分级存储模型 什么是分级存储模型 配置实例集群 配置同集群优先的负载均衡 权重配置 点击编辑按钮 配置所需的权重 环境隔离 创建namespace 什么是Nacos Nacoshttps://nacos.i…...
AOJ 2200 Mr. Rito Post Office 最短路径+动态规划+谨慎+思维
我写了好多注释，一看就能看懂，这个题目我想了6，7个小时，一开始忽略了船的位置和要把船安置的位置一致的情况，补上就对了。 #include <iostream> using namespace std; int inf 0x3f3f3f3f, num[1007], dp[1007…...
红米电视 ADB 安装 app 报错 failed to authenticate xxx:5555
开启电视开发者模式，允许安装未知来源应用及开启 ADB 调试电脑端下载 adb 工具 点击下载同一局域网的电脑使用 adb 工具连接（提前查看电视 IP）D:\adb>adb connect 192.168.1.7 * daemon not running; starting now at tcp:5037 * daemon s…...
Linux 下设置开机自启动的方法
文章目录 事先准备对于普通的 Linux对于 RedHat Enterprise Linux 9 笔者的运行环境： 设置成功过的 Linux： RedHat Enterprise Linux 9 x86_64 CentOS 8 x86_64 事先准备 进行这个教程之前，必须要先安装好一个 Linux 操作系统。这个 Linux…...
MySQL常见问题处理(三)
MySQL 常见问题解决 夕阳留恋的不是黄昏，而是朝阳 上一章简单介绍了MySQL数据库安装(二), 如果没有看过, 请观看上一章 一. root 用户密码忘记，进行重置操作 复制内容来源链接: https://blog.csdn.net/weixin_48927364/article/details/123556927 一.…...
maven中常见问题
文章目录 一、配置项提示二、父子打包三、打包之后不显示target四、自定义打包之后的jar包名称五、整个项目打包5.1、父项目管理插件和微服务打包 一、配置项提示 SpringBoot中提示错误信息 表示的是SpringBoot中的注释提示没有配置！那么可以来使用一下springboot官…...
vue2中bus的使用
说明：为了解决组件间的通信，也就是组件与组件间的数据传递(它们之间毫无关系)； 这里以组件1传递数据到组件2为例 1.首先新建一个Bus.js文件 import Vue from vue const Bus new Vue() export default Bus 2.在组件1中引用 传递数据 imp…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
django filter 统计数量 按属性去重
在Django中，如果你想要根据某个属性对查询集进行去重并统计数量，你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求： 方法1：使用annotate()和Count 假设你有一个模型Item，并且你想…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现（两者等价），用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例： 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
Oracle11g安装包
Oracle 11g安装包 适用于windows系统，64位 下载路径 oracle 11g 安装包...