基于@media (prefers-color-scheme: [dark|light])的暗黑与亮色主题切换

今天有人反馈使用pdf.js的时候,发现pdf.js阅读器在自己的Mac Book电脑上显示的背景是暗黑色,而别人的电脑上却是白色:

在这里插入图片描述

根据这个问题,找到了pdf.js使用的view.css有段代码,类似这样:

@media (prefers-color-scheme: dark){--dialog-bg-color:#1c1b22;
}

@media (prefers-color-scheme: dark)这个是什么意思呢?

以前如果提到 CSS 的 @media ,可能的第一反应就是它是用来做屏幕查询的,但实际上@media的查询功能远超想象。本文就基于@media (prefers-color-scheme: dark)的暗黑主题切换设置进行说明:

说到主题切换,很多站点都会配置多套的CSS颜色,用作站点主题切换。大部分站点会在页面导航的右上角增加一个主题切换的 选择框,让用户进行主题选择切换。实现的方式是,配置不同颜色的var变量,在写css样式时,在代码中引入var变量,最后通过改变全局 :root 做到站点的主题切换。

var 配置::root{--background-color: #fff;--font-color: #000;--border-color: #eee;
}
css 使用:body {backgroud-color: var(--background-color);color: var(--font-color);border-color: var(---border-color)
}

而如何跟随系统主题的设置进行主题颜色的匹配呢?这就需要用到prefers-color-scheme css 媒体特性。

在macOS系统中提出了dark和light两种视觉模式,即暗色(dark)和高亮(light)两种皮肤,而且这两种皮肤是系统级别的:

在这里插入图片描述

下面结合prefers-color-scheme css 媒体特性跟随系统主题的设置进行主题颜色的匹配:

prefers-color-scheme css 媒体特性:
用于检测用户是否有将系统的主题色设置为亮色或者暗色。

通过配置CSS的 @media ,我们就可以获取到系统的深色模式。

浅色模式:

@media (prefers-color-scheme: light) {...
}

深色模式:

@media (prefers-color-scheme: dark) {...
} 

除 light 和 dark 两个参数外,还有一个 no-preference 参数,配置此参数,则不会进行任何的系统模式查询。

接下来,我们结合@media、prefers-color-scheme、var进行一个简单背景色的切换的应用:

style.css:网站上普通样式(通用样式)body {backgroud-color: var(--background-color);
}
dark.css:暗色系所需样式规则@media (prefers-color-scheme: light) {:root {--background-color: white;}
}
light.css:亮色系所需样式规则@media (prefers-color-scheme: dark) {:root {--background-color: black;}
} 

然后我们可以使用<link media=""/>有条件的加载。

最后我们利用Caniuse,一起看一下这个特性目前的兼容性:

在这里插入图片描述

我们可以利用js来探测它的兼容性和监听它的变化:

// 检查用户是否偏好深色主题
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');// 监听变化
darkModeMediaQuery.addEventListener('change', () => {if (darkModeMediaQuery.matches) {console.log('主题已切换:用户偏好深色主题');// 在这里应用深色主题的样式或逻辑} else {console.log('主题已切换:用户偏好浅色主题');// 在这里应用浅色主题的样式或逻辑}
});// 初始检查
if (darkModeMediaQuery.matches) {console.log('初始状态:用户偏好深色主题');
} else {console.log('初始状态:用户偏好浅色主题');
}

看一下效果,在亮色主题下执行以上代码,然后先后切换暗黑和亮色模式的结果如下:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/314486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

做「容量预估」可没有true和false

这里是Z哥的个人公众号每周五11&#xff1a;45 按时送达当然了&#xff0c;也会时不时加个餐&#xff5e;我的第「85」篇原创敬上随着20年来互联网的蓬勃发展&#xff0c;一个软件系统所要面对的访问压力上限被逐渐提高。虽然如此&#xff0c;但是那些体量达到亿级或者是千万级…

你不得不了解的10款服务器监控工具

监控Web服务器或Web主机的运行状况和正常运行非常重要。如果希望确保您的网站可用性在您的控制之中&#xff0c;那你就需要收集服务器各种性能数据以供分析和调整。以下是收集的常用大多数服务器监控组件解决方案。01Performance Co-PilotPerformance Co-Pilot&#xff0c;简称…

统一流控服务开源:基于.Net Core的流控服务

先前有一篇博文&#xff0c;梳理了流控服务的场景、业界做法和常用算法统一流控服务开源-1&#xff1a;场景&业界做法&算法篇最近完成了流控服务的开发&#xff0c;并在生产系统进行了大半年的验证&#xff0c;稳定可靠。今天整理一下核心设计和实现思路&#xff0c;开…

.NET Core 编写 Azure Function 并连接 GitHub 持续部署

点击上方蓝字关注“汪宇杰博客”导语Azure Function 是一个事件驱动型无服务器计算平台&#xff0c;可以解决复杂的业务流程问题&#xff0c;更加高效地进行开发。在本地构建和调试&#xff0c;而无需额外的设置&#xff0c;在云中大规模部署和操作&#xff0c;并使用触发器和绑…

「数据ETL」从数据民工到数据白领蜕变之旅(五)-使用dotNET脚本实现SSIS无限扩展...

在前面一文中&#xff0c;正式引出了SSIS专业数据ETL工具&#xff0c;笔者仅能作引路作用&#xff0c;未能使用文章的方式给大家写出更多的入门级的文章&#xff0c;希望读者们可以自行根据分享的学习资源自行完成入门及进阶的学习。同时也想给大家分享到SSIS的能力边界性&…

数据结构为什么那么难?

来源 | 异步 | 文末赠书2017年8月&#xff0c;本着让更多的人轻松学习算法的初心&#xff0c;我写作了第一本书《趣学算法》&#xff0c;该书在出版后受到广大读者一致好评&#xff0c;在一年内重印了10次&#xff0c;并输出了繁体版的版权。一位读者对我说&#xff0c;读这本书…

书籍推荐:《C#7.0本质论》

在dotNet平台中有多种开发语言可以使用&#xff0c;C#无疑是其中应用得最为广泛的。学习一门编程语言最好的方式就是找一本好书系统地学习&#xff0c;我读过的关于C#的书籍中&#xff0c;我认为下面三本最为经典&#xff1a;《C#本质论》&#xff1a;入门类&#xff0c;目前最…

gRPC的简单使用

前言八月初的时候&#xff0c;在公司内部做了一个主题为《gRPC的简单使用》的分享&#xff0c;其实就是和小伙伴们扯扯淡&#xff0c;现在抽空回忆一下&#xff0c;也算是一个小小的总结吧。现在市面上耳熟能详的RPC框架也很多&#xff0c;下面列举几个遇到比较多的。谷歌的gRP…

生命周期结束,Spring Boot 1.x退役

一年前 Spring 官方宣布 Spring Boot 1.x 生命周期将于今年 8 月 1 日结束&#xff0c;如今时间已到&#xff0c;在发布 Spring Boot 1.5.22 的同时&#xff0c;Spring 确认将不再为 1.x 系列发布维护版本。官方希望用户尽快迁移到 Spring Boot 2.x 上&#xff0c;为此还制作了…

Apollo 配置中心:分布式部署

Apollo&#xff08;阿波罗&#xff09;是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端&#xff0c;并且具备规范的权限、流程治理等特性&#xff0c;适用于微服务配置管理场景。服务端…

使用Redis实现最近N条数据的决策

前言很多时候&#xff0c;我们会根据用户最近一段时间的行为&#xff0c;做出一些相应的策略&#xff0c;从而改变系统的运动轨迹。举个简单的例子来说明一下&#xff1a;假设A公司现在有两个合作伙伴(B和C)&#xff0c;B和C都是提供天气数据的&#xff0c;现在A公司做了一个聚…

为什么我不喜欢数据库三范式

插曲最近&#xff0c;一个远房亲戚的小表弟准备选修专业找到我问&#xff1a;"哥&#xff0c;现在学数据库有没有前途阿?""当然有啊&#xff0c;前途大大的呢""那我现在开始学数据库&#xff0c;需要先从什么开始呢?""学课程的话&#xf…

硬货 - 技术人也能轻松玩转公众号?正确姿势竟然是...

最近在知乎上看到关于「公众号是否有“前”途」的相关问题... 问题下面有些精华回答~微信公众号还有“前”途吗&#xff1f; - 知乎https://www.zhihu.com/question/324575670很好的问题&#xff01;作为一个技术人&#xff0c;我决定将此问题和自身情况结合起来&#xff0c;于…

你必须知道的Dockerfile

本篇已加入《.NET Core on K8S学习实践系列文章索引》&#xff0c;可以点击查看更多容器化技术相关系列文章。本文预计阅读时间为5分钟。01—关于Dockerfile在Docker中创建镜像最常用的方式&#xff0c;就是使用Dockerfile。Dockerfile是一个Docker镜像的描述文件&#xff0c;我…

RabbitMQ 死信/死信队列

一、RabbitMQ 死信/死信队列1、DLXDead Letter Exchange 的缩写DLX&#xff08;Dead Letter Exchanges&#xff09;死信交换&#xff0c;死信队列本身也是一个普通的消息队列&#xff0c;在创建队列的时候&#xff0c;通过设置一些关键参数&#xff0c;可以将一个普通的消息队列…

centos7 rabbitmq安装/配置

一、RabbitMQ简单介绍RabbitMQ就是当前最主流的消息中间件之一。RabbitMQ是一个开源的AMQP实现&#xff0c;服务器端用Erlang语言编写&#xff0c;支持多种客户端&#xff0c;如&#xff1a;Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP、STOMP等&#xff0c;支…

Hyper-V + CentOS7 安装视频教程

一、前言本文使用图文视频的方式展示安装Centos7&#xff0c;【喜欢看视频学习的童靴请拖至文尾观看视频】二、虚拟机配置指定虚拟机名称&安装位置选择虚拟机代数 第一代虚拟机&#xff08;例如Server 2008等平台技术&#xff0c;支持Vista、Win7&#xff09; 第二代虚拟机…

程序员修神之路--用NOSql给高并发系统加速

领取福利记得长按&#xff0c;领取技术书籍哦随着互联网大潮的到来&#xff0c;越来越多网站&#xff0c;应用系统需要海量数据的支撑&#xff0c;高并发、低延迟、高可用、高扩展等要求在传统的关系型数据库中已经得不到满足&#xff0c;或者说关系型数据库应对这些需求已经显…

限时团购,6.5折:《C# 7.0 核心技术指南》

大家好&#xff0c;经过近两年的翻译&#xff0c;《C# 7.0 核心技术指南》终于和大家见面了。全书由 ThoughtWorks 高级咨询师&#xff0c;资深 .NET 专家刘夏翻译。作为一本第七次再版的图书&#xff0c;此次翻译对书中的字句进行了重新整理。期间和图书的原作者 Joe Albahari…

Azure 命令行工具大混战,都是什么,该选哪个?

点击上方蓝字关注“汪宇杰博客”导语最近在学习 Azure 的命令行玩法&#xff0c;发现官方有不止一种命令行工具&#xff0c;容易对新手产生混淆&#xff0c;本文将介绍各种工具都是干啥的&#xff0c;以及如何选择。目前&#xff0c;微软官方有3个Azure命令行工具&#xff0c;分…