CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言
在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用，然后就模仿里边写了个简单例子，代码如下：
body {background-color: #f5f5f5;}@media (prefers-color-scheme: dark) {body {background-color: #666;}}
然后通过修改系统的黑天白夜/浅色深色模式, body的背景色也跟着响应的变动了，这个跟现在各APP推出黑夜模式以及随系统改变白天白夜模式的功能息息相关啊，感觉到了这个属性的重要性就在caniuse中查了一下，不出所料咱们的老朋友IE仍不支持，不过对于移动端的小伙伴来说已经够用了。
然后根据查询到的资料整理了一个demo，有需要的朋友可以复制下来到运行一下看效果，要注意在页面中手动设置light和dark后需要清除或者刷新页面，不然body的变化会使得系统的变化体现不出来
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>系统的主题色设置为亮色或者暗色</title><style lang="css">/* 整个页面配置为使用用户的配色方案首选项 *//* 根元素，优先级最高，与html选择器相同 */:root {--color-background: #1b1b1b;--color-border: #cacfd5;--color-text-default: #0b1016;--color-base: #f4f5f6;--white-color-background: #fff;color-scheme: light dark;}* {margin: 0;padding: 0;}body {text-align: center;height: 100vh;}.light-scheme {background: var(--white-color-background);color: var(--color-text-default);}.dark-scheme {background: var(--color-background);color: white;}/* 监听操作系统主题模式 */@media (prefers-color-scheme: dark) {body {background-color: var(--color-background);}}@media (prefers-color-scheme: light) {body {background-color: var(--white-color-background);}}.tab-type {display: flex;justify-content: center;padding-top: 30px;}.tab-type>li {list-style: none;cursor: pointer;color: #fff;background-color: rgb(33, 139, 216);border-radius: 12px;padding: 10px;margin: 0px 20px;text-align: center;}#schemeTip {line-height: 50px;}</style>
</head><body><div class="content" id="content"><ul class="tab-type"><li id="light">浅色主题</li><li id="dark">暗色主题</li><li id="resetEffect">清除手动设置的影响</li></ul><h3 id="schemeTip"></h3></div><script>// 手动修改主题颜色const light = document.getElementById('light')const dark = document.getElementById('dark')const resetEffect = document.getElementById('resetEffect')const content = document.bodyconst tipText = document.getElementById('schemeTip')let lightTip = '当前自定义主题：light亮色', darkTip = '当前自定义主题：dark暗色'light.onclick = () => {content.setAttribute('class', 'light-scheme')tipText.innerHTML = lightTip}dark.onclick = () => {content.setAttribute('class', 'dark-scheme')tipText.innerHTML = darkTip}// 清除设置后不影响系统变化的效果resetEffect.onclick = () => {content.setAttribute('class', '')// 默认亮色tipText.innerHTML = lightTip}// js 监听系统主题模式，这个属性为js加载时候获取，目前还没有js监听的原生方法，如果后期有改动请留言const scheme = window.matchMedia('(prefers-color-scheme: dark)')console.log('系统主题变化', scheme)if (scheme.matches) {// 深色模式业务处理代码console.log('深色模式');tipText.innerHTML = darkTip} else {// 浅色模式业务处理代码console.log('浅色模式');tipText.innerHTML = lightTip}</script>
</body></html>
注意：目前prefers-color-scheme的值只有light和dark两种模式，其他的仍为手动设置。
相关文章：
CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式
前言 在最近学习中突然看到了在媒体查询中prefers-color-scheme:dark监听的使用，然后就模仿里边写了个简单例子，代码如下： body {background-color: #f5f5f5;}media (prefers-color-scheme: dark) {body {background-color: #666;}}然后通过…...
运行YOLOv8实现识别
https://github.com/ultralytics/ultralyticshttps://docs.ultralytics.com/环境配置官方环境要求Python>3.7（我是python3.8也是可以用的） environment with PyTorch>1.7.这是ultralyticsCommand Line Interface命令行接口运行输入参数的格式yolo …...
如何在Linux中优雅的使用 head 命令，用来看日志简直溜的不行
当您在 Linux 的命令行上工作时，有时希望快速查看文件的第一行，例如，有个日志文件不断更新，希望每次都查看日志文件的前 10 行。很多朋友使用文本编辑的命令是vim，但还有个命令head也可以让轻松查看文件的第一行。 在…...
Nginx.conf 配置详解
#安全问题，建议用nobody,不要用root. #user nobody; #worker数和服务器的cpu数相等是最为适宜 worker_processes 2; #work绑定cpu(4 work绑定4cpu) worker_cpu_affinity 0001 0010 0100 1000 #error_log path(存放路径) level(日志等级) path表示日志路径&…...
剖析NLP历史，看chatGPT的发展
1、NLP历史演进 1.1 NLP有监督范式 NLP里的有监督任务的范式，可以归纳成如下的样子。 输入是字词序列，中间一步关键的是语义表征，有了语义表征之后，然后交给下游的模型学习。所以预训练技术的发展，都是在围绕怎么…...
20个Python使用小技巧，建议收藏~
1、易混淆操作 本节对一些 Python 易混淆的操作进行对比。 1.1 有放回随机采样和无放回随机采样 import random random.choices(seq, k1) # 长度为k的list，有放回采样 random.sample(seq, k) # 长度为k的list，无放回采样1.2 lambda 函数的参数 …...
Kafka 主题管理
Kafka 主题管理创建主题查看主题修改主题内部主题异常主题删除失败创建主题 创建 Kafka 主题 create : 创建主题partitions : 主题的分区数replication-factor : 每个分区下的副本数 bin/kafka-topics.sh \ --bootstrap-server broker_host:port \ --create --topic my_topi…...
【深度学习】GPT系列模型：语言理解能力的革新
GPT-1🏡 自然语言理解包括一系列不同的任务，例如文本蕴涵、问答、语义相似度评估和文档分类。尽管大量的未标记文本语料库很充足，但用于学习这些特定任务的标记数据却很稀缺，使得判别式训练模型难以达到良好的表现。我们证明&…...
【Vue.js】全局状态管理模式插件vuex
文章目录全局状态管理模式Vuexvuex是什么？什么是“状态管理模式”？vuex的应用场景Vuex安装开始核心概念一、State1、单一状态树2、在 Vue 组件中获得 Vuex 状态3、mapState辅助函数二、Getter三、Mutation1、提交载荷（Payload）2、…...
JPA 之 Hibernate EntityManager 使用指南
Hibernate EntityManager 专题 参考： JPA – EntityManager常用API详解EntityManager基本概念 基本概念及获得 EntityManager 对象 基本概念 在使用持久化工具的时候，一般都有一个对象来操作数据库，在原生的Hibernate中叫做Session&…...
英语作文提示（持续更新）
星期（介词on）Monday星期一Tuesday星期二Wednesday星期三Thursday星期四Friday星期五Saturday星期六Sunday星期日月份（介词in）lunar calendar农历on the second day of the second lunar农历初二January1月February2月March3月Apri…...
【计算机组成原理】计算机的性能指标、数据的表示和运算、BCD码和余3码
计算机组成原理(二) 计算机的性能指标: 存储器的性能指标： 存储器中，MAR为存储单元的个数 MDR为机械字长也就是存储单元的长度 存储器的大小MAR*MDR n为二进制位能表示出几种不同的状态呢？ 2的n次方种不同的状态 CPU的性能指标…...
三天吃透MySQL八股文（2023最新整理）
本文已经收录到Github仓库，该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点，欢迎star~ Github地址：https://github.com/…...
队列_23约瑟夫问题+_24猫狗收容所
约瑟夫问题 n 个小孩围坐成一圈，并按顺时针编号为1,2,…,n，从编号为 p 的小孩顺时针依次报数，由1报到m ，当报到 m 时，该小孩从圈中出去，然后下一个再从1报数，当报到 m 时再出去。如此反复&#…...
gradle
Gradle环境介绍OpenJDK 17.0.5Gradle 7.6示例代码 fly-gradleGradle 项目下文件介绍如果你的电脑安装了 gradle，可以使用 gradle init 去初始化一个新的 gradle 工程，然后使用电脑安装的 gradle 去执行构建命令。但是每个开发电脑上的 gradle 版本不一样…...
[牛客]链表中倒数第k个结点
使用快慢指针法:两种思路:1.fast先向后走k-1次,slow再向后走1次,然后fast和slow同时向后走,当fast走到最后一个结点时,slow刚好在倒数第k个位置上;2.fast先向后走k次,slow再向后走1次,然后fast和slow同时向后走,当fast走到最后一个结点的后面时(此时为NULL),slow刚好在倒数第k个…...
English Learning - L2 语音作业打卡 双元音 [eɪ] [aɪ] Day14 2023.3.6 周一
English Learning - L2 语音作业打卡 双元音 [eɪ] [aɪ] Day14 2023.3.6 周一💌发音小贴士：💌当日目标音发音规则/技巧:🍭 Part 1【热身练习】🍭 Part2【练习内容】🍭【练习感受】🍓元音 /eɪ/…...
C++ this 指针与静态成员
文章目录参考描述实例成员与静态成员实例成员静态成员静态成员属性隐式形参 this 指针冲突this 指针静态成员函数this 指针与静态成员函数参考 项目精通C （第九版）托尼加迪斯、朱迪沃尔特斯、戈德弗雷穆甘达 （著） / 黄刚 等 &…...
REDIS16_LRU算法概述、查看默认内存、默认是如何删除数据、缓存淘汰策略
文章目录①. LRU算法概述②. 查看默认内存③. 如何删除数据④. 缓存淘汰策略①. LRU算法概述 ①. LRU是Least Recently Used的缩写,即最近最少使用,是一种常用的页面置换算法,选择最近最久未使用的数据给予淘汰 (leetcode-cn.com/problems/lru-cache) ②. LRU算法题来源 ③.…...
ClassMix: Segmentation-Based Data Augmentation for Semi-Supervised Learning学习笔记
ClassMix相关介绍主要思想方法Mean-Teacher损失函数交叉熵损失标签污染实验实验反思参考资料相关介绍 从DAFormer溯源到这篇文章，ClassMix主要是集合了伪标签和一致性正则化，思想来源于CutMix那条研究路线，但是优化了CutMix中的标签污染的情…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
Spring Boot 实现流式响应（兼容 2.7.x）
在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或 流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 （一）多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如，当用户上传一张“蓝色连衣裙”的图片时，接口可自动提取图像中的颜色（RGB值&…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）
本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容 本期用到的软件：yakit（因为经过之前好多期…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...
MySQL 主从同步异常处理
阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示ÿ…...