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

CSS媒体查询@media (prefers-color-scheme:dark)判断系统白天黑夜模式

news 文章来源：https://blog.csdn.net/jason_renyu/article/details/129306381 2025/1/19 7:18:50

前言

在最近学习中突然看到了在媒体查询中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监听的使用&#xff0c;然后就模仿里边写了个简单例子&#xff0c;代码如下&#xff1a; body {background-color: #f5f5f5;}media (prefers-color-scheme: dark) {body {background-color: #666;}}然后通过…...

编程日记 2023/3/12 21:08:21

运行YOLOv8实现识别

https://github.com/ultralytics/ultralyticshttps://docs.ultralytics.com/环境配置官方环境要求Python>3.7&#xff08;我是python3.8也是可以用的&#xff09; environment with PyTorch>1.7.这是ultralyticsCommand Line Interface命令行接口运行输入参数的格式yolo …...

编程日记 2023/3/12 21:03:19

如何在Linux中优雅的使用 head 命令，用来看日志简直溜的不行

当您在 Linux 的命令行上工作时&#xff0c;有时希望快速查看文件的第一行&#xff0c;例如&#xff0c;有个日志文件不断更新&#xff0c;希望每次都查看日志文件的前 10 行。很多朋友使用文本编辑的命令是vim&#xff0c;但还有个命令head也可以让轻松查看文件的第一行。 在…...

编程日记 2023/3/12 20:58:17

Nginx.conf 配置详解

#安全问题&#xff0c;建议用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表示日志路径&…...

编程日记 2023/3/12 20:53:15

剖析NLP历史，看chatGPT的发展

1、NLP历史演进 1.1 NLP有监督范式 ​ NLP里的有监督任务的范式&#xff0c;可以归纳成如下的样子。 输入是字词序列&#xff0c;中间一步关键的是语义表征&#xff0c;有了语义表征之后&#xff0c;然后交给下游的模型学习。所以预训练技术的发展&#xff0c;都是在围绕怎么…...

编程日记 2023/3/12 20:48:14

20个Python使用小技巧，建议收藏~

1、易混淆操作 本节对一些 Python 易混淆的操作进行对比。 1.1 有放回随机采样和无放回随机采样 import random random.choices(seq, k1) # 长度为k的list&#xff0c;有放回采样 random.sample(seq, k) # 长度为k的list&#xff0c;无放回采样1.2 lambda 函数的参数 …...

编程日记 2023/3/12 20:43:11

Kafka 主题管理

Kafka 主题管理创建主题查看主题修改主题内部主题异常主题删除失败创建主题 创建 Kafka 主题 create : 创建主题partitions : 主题的分区数replication-factor : 每个分区下的副本数 bin/kafka-topics.sh \ --bootstrap-server broker_host:port \ --create --topic my_topi…...

编程日记 2023/5/30 14:37:30

【深度学习】GPT系列模型：语言理解能力的革新

GPT-1&#x1f3e1; 自然语言理解包括一系列不同的任务&#xff0c;例如文本蕴涵、问答、语义相似度评估和文档分类。尽管大量的未标记文本语料库很充足&#xff0c;但用于学习这些特定任务的标记数据却很稀缺&#xff0c;使得判别式训练模型难以达到良好的表现。我们证明&…...

编程日记 2023/3/12 20:33:04

【Vue.js】全局状态管理模式插件vuex

文章目录全局状态管理模式Vuexvuex是什么&#xff1f;什么是“状态管理模式”&#xff1f;vuex的应用场景Vuex安装开始核心概念一、State1、单一状态树2、在 Vue 组件中获得 Vuex 状态3、mapState辅助函数二、Getter三、Mutation1、提交载荷&#xff08;Payload&#xff09;2、…...

编程日记 2023/3/12 20:28:02

JPA 之 Hibernate EntityManager 使用指南

Hibernate EntityManager 专题 参考&#xff1a; JPA – EntityManager常用API详解EntityManager基本概念 基本概念及获得 EntityManager 对象 基本概念 在使用持久化工具的时候&#xff0c;一般都有一个对象来操作数据库&#xff0c;在原生的Hibernate中叫做Session&…...

编程日记 2023/3/12 20:23:01

英语作文提示（持续更新）

星期&#xff08;介词on&#xff09;Monday星期一Tuesday星期二Wednesday星期三Thursday星期四Friday星期五Saturday星期六Sunday星期日月份&#xff08;介词in&#xff09;lunar calendar农历on the second day of the second lunar农历初二January1月February2月March3月Apri…...

编程日记 2023/3/12 20:18:00

【计算机组成原理】计算机的性能指标、数据的表示和运算、BCD码和余3码

计算机组成原理(二) 计算机的性能指标: 存储器的性能指标&#xff1a; 存储器中&#xff0c;MAR为存储单元的个数 MDR为机械字长也就是存储单元的长度 存储器的大小MAR*MDR n为二进制位能表示出几种不同的状态呢&#xff1f; 2的n次方种不同的状态 CPU的性能指标&#xf…...

编程日记 2023/3/12 20:12:57

三天吃透MySQL八股文（2023最新整理）

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…...

编程日记 2023/3/12 20:07:54

队列_23约瑟夫问题+_24猫狗收容所

约瑟夫问题 n 个小孩围坐成一圈&#xff0c;并按顺时针编号为1,2,…,n&#xff0c;从编号为 p 的小孩顺时针依次报数&#xff0c;由1报到m &#xff0c;当报到 m 时&#xff0c;该小孩从圈中出去&#xff0c;然后下一个再从1报数&#xff0c;当报到 m 时再出去。如此反复&#…...

编程日记 2023/3/12 20:02:53

gradle

Gradle环境介绍OpenJDK 17.0.5Gradle 7.6示例代码 fly-gradleGradle 项目下文件介绍如果你的电脑安装了 gradle&#xff0c;可以使用 gradle init 去初始化一个新的 gradle 工程&#xff0c;然后使用电脑安装的 gradle 去执行构建命令。但是每个开发电脑上的 gradle 版本不一样…...

编程日记 2023/3/12 20:01:14

[牛客]链表中倒数第k个结点

使用快慢指针法:两种思路:1.fast先向后走k-1次,slow再向后走1次,然后fast和slow同时向后走,当fast走到最后一个结点时,slow刚好在倒数第k个位置上;2.fast先向后走k次,slow再向后走1次,然后fast和slow同时向后走,当fast走到最后一个结点的后面时(此时为NULL),slow刚好在倒数第k个…...

编程日记 2023/3/12 9:22:57

English Learning - L2 语音作业打卡 双元音 [eɪ] [aɪ] Day14 2023.3.6 周一

English Learning - L2 语音作业打卡 双元音 [eɪ] [aɪ] Day14 2023.3.6 周一&#x1f48c;发音小贴士&#xff1a;&#x1f48c;当日目标音发音规则/技巧:&#x1f36d; Part 1【热身练习】&#x1f36d; Part2【练习内容】&#x1f36d;【练习感受】&#x1f353;元音 /eɪ/…...

编程日记 2023/3/12 9:21:50

C++ this 指针与静态成员

文章目录参考描述实例成员与静态成员实例成员静态成员静态成员属性隐式形参 this 指针冲突this 指针静态成员函数this 指针与静态成员函数参考 项目精通C &#xff08;第九版&#xff09;托尼加迪斯、朱迪沃尔特斯、戈德弗雷穆甘达 &#xff08;著&#xff09; / 黄刚 等 &…...

编程日记 2023/3/12 9:20:46

REDIS16_LRU算法概述、查看默认内存、默认是如何删除数据、缓存淘汰策略

文章目录①. LRU算法概述②. 查看默认内存③. 如何删除数据④. 缓存淘汰策略①. LRU算法概述 ①. LRU是Least Recently Used的缩写,即最近最少使用,是一种常用的页面置换算法,选择最近最久未使用的数据给予淘汰 (leetcode-cn.com/problems/lru-cache) ②. LRU算法题来源 ③.…...

编程日记 2023/3/12 9:19:42

ClassMix: Segmentation-Based Data Augmentation for Semi-Supervised Learning学习笔记

ClassMix相关介绍主要思想方法Mean-Teacher损失函数交叉熵损失标签污染实验实验反思参考资料相关介绍 从DAFormer溯源到这篇文章&#xff0c;ClassMix主要是集合了伪标签和一致性正则化&#xff0c;思想来源于CutMix那条研究路线&#xff0c;但是优化了CutMix中的标签污染的情…...

编程日记 2023/3/12 9:18:41

CSDN竞赛第35期题解

CSDN竞赛第35期题解 1、题目名称&#xff1a;交换后的or 给定两组长度为n的二进制串&#xff0c;请问有多少种方法在第一个串中交换两个不同位置上的数字&#xff0c;使得这两个二进制串“或”的 结果发生改变&#xff1f; int n;cin>>n; string a,b;cin>>a>…...

编程日记 2023/3/12 9:17:36

Java应用服务系统安全性，签名和验签浅析

1 前言 随着互联网的普及&#xff0c;分布式服务部署越来越流行&#xff0c;服务之间通信的安全性也是越来越值得关注。这里&#xff0c;笔者把应用与服务之间通信时&#xff0c;进行的的安全性相关&#xff0c;加签与验签&#xff0c;进行了一个简单的记录。 2 安全性痛点 …...

编程日记 2023/3/12 9:16:30

spring中bean的实例化

构造方法实现实例化 无参构造器实例化 我们之前用的就一直是无参构造器实现实例化&#xff0c;虽然没有在类中写构造器&#xff0c;但是每个类都会有一个默认的无参构造器 有参构造器实例化 相比于无参构造器&#xff0c;我们只需要传入参数就可以了 我们可以通过construc…...

编程日记 2023/3/12 9:15:24

磨皮插件portraiture2023最新中文版

Portraiture滤镜是一款 Photoshop&#xff0c;Lightroom 和 Aperture 插件&#xff0c;DobeLighttroom 的 Portraiture 消除了选择性掩蔽和逐像素处理的繁琐的手工劳动&#xff0c;以帮助您在肖像修整方面取得卓越的效果。它是一个强大的&#xff0c;但用户友好的插件照明.这是…...

编程日记 2023/3/12 9:14:21

记录每日LeetCode 2269.找到一个数组的K美丽值 Java实现

题目描述&#xff1a; 一个整数 num 的 k 美丽值定义为 num 中符合以下条件的 子字符串 数目&#xff1a; 子字符串长度为 k 。 子字符串能整除 num 。 给你整数 num 和 k &#xff0c;请你返回 num 的 k 美丽值。 注意&#xff1a; 允许有 前缀 0 。 0 不能整除任何…...

编程日记 2023/3/12 9:13:15

代码管理--svnadmin工具介绍

1、简介 SVNAdmin2 是一款通过图形界面管理服务端SVN的web程序。正常情况下配置SVN仓库的人员权限需要登录到服务器手动修改 authz 和 passwd 两个文件&#xff0c;当仓库结构和人员权限上了规模后&#xff0c;手动管理就变的非常容易出错&#xff0c;本系统能够识别人员和权限…...

编程日记 2023/4/11 22:16:26

Git的基本使用以及上传到GitHub

GIT的基本使用一、安装并配置GIT二、Git的基本操作三、使用GIT上传至GitHub四、Git分支一、安装并配置GIT 1.安装GIT连接 GIT安装包链接 2.打开GIT 鼠标右键点击Git Bash Here 安装完 Git 之后&#xff0c;第一件事就是设置自己的用户名和邮件地址。因为通过 Git 对项目进行…...

编程日记 2023/3/12 9:10:00

国科大论文latex模板中可能的注意事项

背景 国科大2022年9月发布了毕业论文的LaTeX模板&#xff0c;它是在ucasthesis上修改而来的&#xff0c;但近日使用国科大发布版本时发现有几点不同以及需要注意的地方。本人只会简单使用latex&#xff0c;但并不熟悉latex样式编辑&#xff0c;因此以下介绍与方法仅供参考。仅…...

编程日记 2023/3/12 9:08:58

ABAP 怎样将XML和JSON格式转换为HTML格式显示

ABAP 怎样将XML和JSON格式转换为HTML格式显示 一、将JSON格式转换为HTML格式 BAP接口程序开发中时常会用到JSON格式来传输数据&#xff0c;在监控传输的JSON串内容时&#xff0c;把JSON转换为HTML格式来显示会很便利。下面提供一个简单例子来实现JSON转化为HTML并显示的功能。…...

编程日记 2023/3/12 9:07:53

基础课DP

DP 背包问题01背包问题完全背包问题多重背包问题多重背包问题II分组背包问题线性DP数字三角形最长上升子序列最长上升子序列II最长公共子序列编组距离区间DP石子合并计数类DP整数划分数位统计DP计数问题状态压缩DP蒙德里安的梦想最短Ha路径树形DP没有上司的舞会...

编程日记 2023/3/12 9:06:51

做企业网站支付功能/短视频推广渠道

前言&#xff1a; 初步学习接触Spring框架使用&#xff0c;而在这里对自己刚学的Aop使用做个小篇幅的总结&#xff0c;方便日后需要用到是可以快速入手&#xff01; 仅用于对自己学习个人笔记&#xff0c;不做任意分享&#xff0c;纯属个人理解不想误认子弟&#xff01; 一、Ao…...

编程日记 2025/1/19 5:26:23

南京维露斯网站建设/seo关键词排名技术

下面介绍标准批输入对象的步骤&#xff1a; 1、创建批输入对象 2、维护对象属性 开始录屏并修改需要的栏位。 3、定义资源结构 4、定义字段 5、定义关系结构 其实就是将上面创建的结构和SAP标准结构匹配&#xff0c;RELATIONSHIP来创建表间关系。 6、字段mapping &#xff0…...

编程日记 2025/1/19 4:48:07

哪个网站可以做一对一老师/aso优化技术

什么是json&#xff1a;JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于语言的文本格式&…...

编程日记 2025/1/19 2:50:33

找网站/线下推广方式

给定一个整数 n &#xff0c;返回 n! 结果中尾随零的数量。 提示 n! n * (n - 1) * (n - 2) * … * 3 * 2 * 1 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;0 解释&#xff1a;3! 6 &#xff0c;不含尾随 0 示例 2&#xff1a; 输入&#xff1a;n 5 输出&a…...

编程日记 2025/1/19 2:29:22

南京网站制作公司报价/学it需要什么学历基础

生成式合成算法是用于生成文本、图像、音频等内容的算法&#xff0c;在应用这些算法的过程中&#xff0c;需要从社会层面考虑风险治理。 一种方法是在使用这些算法之前&#xff0c;对它们的可能影响进行风险评估&#xff0c;并制定风险控制措施。这些措施可以包括&#xff1a; …...

编程日记 2025/1/18 22:20:12

网站建设策划书/电商网站推广方案

1、以excel2010版本为例&#xff0c;如下图所示&#xff0c;要把该图表复制到PPT&#xff1b; 2、点击excel的图表点复制&#xff0c;然后在PPT里面点击鼠标右键&#xff0c;粘贴选项选择保留源格式和嵌入工作簿&#xff1b; 3、点击保留源格式和嵌入工作簿后就会得到如下图所…...

编程日记 2025/1/18 18:39:28