perfers-color-scheme 使用简单介绍
perfers-color-scheme
简介
prefers-color-scheme 媒体查询属性用于检测用户操作系统是否使用深色模式。
属性值
dark表示用户操作系统使用深色模式light表示用户操作系统使用浅色模式no-preference表示用户操作系统没有偏好，或者操作系统不支持该属性
示例
@media (prefers-color-scheme: dark) {
body {
background: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
body {
background: white;
color: black;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统主题模式</title>
</head>
<body>
</body>
</html>
JS 获取
const scheme = window.matchMedia('(prefers-color-scheme: dark)').matches
scheme ? console.log("用户系统使用深色模式") : console.log("用户系统使用浅色模式")
- Mac 电脑可以在通用里设置模式切换查看效果 windows 自行百度如何切换主题模式进行尝试
color-scheme
- light 表示可以使用操作系统亮色配色方案渲染元素。
- dark 表示可以使用操作系统深色配色方案渲染元素。
- no-preference 表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
- only 禁止用户代理覆盖元素的颜色方案。
语法
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
/* 全局值 */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
- 备注：测试直接制定 表单元素有效
要将整个页面配置为使用用户的配色方案首选项，请在 :root 元素上指定 color-scheme。
:root {
color-scheme: light dark;
}
浏览器兼容性
参考文档
perfers-color-scheme 使用简单介绍的更多相关文章
- Scheme语言--简单介绍
一年前事实上有时间看完SICP这本书,后来由于种种原因,一直没有继续再学.由于SICP中使用Scheme确实应用不多.在Java,C++的语言眼里,Scheme确实非常另类.现在MIT已经放弃了使用S ...
- mac系统终端的color scheme配置和vim配置
一.配置终端 solarized http://ethanschoonover.com/solarized 简单配置脚本: #!/bin/sh git clone git://github.com/a ...
- smarty简单介绍
smarty简单介绍 示意图如下 简单介绍smarty.class.php类的大体内容,如下: <?php class Smarty //此类就是libs中的Smarty.class.php类 ...
- unity Dotween插件的简单介绍及示例代码
unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...
- Epplus 使用的简单介绍
操作Excel的主要有以下类库: MyXls(http://sourceforge.net/projects/myxls/) Koogra(http://sourceforge.net/project ...
- JSF简单介绍
JSF简单介绍 一. 什么是 JSF: JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架.它提供了一种以组件为中心来开发 Java Web 用户界 ...
- OpenCV 编程简单介绍（矩阵/图像/视频的基本读写操作）
PS. 因为csdn博客文章长度有限制,本文有部分内容被截掉了.在OpenCV中文站点的wiki上有可读性更好.而且是完整的版本号,欢迎浏览. OpenCV Wiki :<OpenCV 编程简单 ...
- Phoenix(sql on hbase)简单介绍
Phoenix(sql on hbase)简单介绍 介绍: Phoenix is a SQL skin over HBase delivered as a client-embedded JDBC d ...
- OWIN产生的背景以及简单介绍
OWIN产生的背景以及简单介绍 随着VS2013的发布,微软在Asp.Net中引入了很多新的特性,比如使用新的权限验证模块Identity, 使用Async来提高Web服务器的吞吐量和效率等.其中一个 ...
- BST&AVL&红黑树简单介绍
(BST&AVL&红黑树简单介绍) 前言: 节主要是给出BST,AVL和红黑树的C++代码,方便自己以后的查阅,其代码依旧是data structures and algorithm ...
随机推荐
- 直播回顾：准确性提升到 5 秒级，ssar 独创的 load5s 指标有多硬核？| 龙蜥技术
简介: 你还在为分析机器负载高而苦恼?这款 ssar 工具独创 load5s 指标精准定位超硬核. 编者按:本文整理自龙蜥SIG技术周会,作者闻茂泉,阿里云计算平台事业部SRE运维专家,是龙蜥社区跟 ...
- 解决 Serverless 落地困难的关键，是给开发者足够的“安全感”
简介:越来越多的云产品都会向全托管.Serverless 形态演进.当云的产品体系 Serverless 化达到一个临界值,通过函数计算这样的 Serverless 计算服务结合其他 Serverl ...
- [FAQ] Windows 终端 git status 不识别文件名大小写的修改
当我们修改了文件名的大小写,git status 显示没有文件改动. 出现这种情况,首先看一下 git 的配置项是否忽略了文件问大小写: $ git config core.ignorecase ...
- dotnet 读 WPF 源代码笔记 渲染层是如何将字符 GlyphRun 画出来的
从业务代码构建出来 GlyphRun 对象,在 WPF 的渲染层里,如何利用 GlyphRun 提供的数据将字符在界面呈现出来.本文将和大家聊聊从 WPF 的渲染层获取到 GlyphRun 数据,到调 ...
- vue-单独引入css文件，设置公共的css样式或者修改默认的vant，mint样式
1.css文件夹下新建global.css文件并粘贴复制: ======================= :root{ --bgColor : #d3252a; --pinkColo ...
- 【HarmonyOS】安装DevEco Studio后检查环境出现ohpm not set up
按照官网的操作方式,下载完ohpm总是检测不到 打开cmd,发现我之前因为其他项目改过编码 输入 regedit 打开注册表编辑页 按路径[计算机\HKEY_LOCAL_MACHINE\SOFTWAR ...
- Solution Set - 线段树
A[洛谷P5787]无向图,每条边有一个出现时段,求每个单位时段图是否是二分图. B[洛谷P5227]无向图,询问删除一个边集后是否连通. C[洛谷P3733]连通无向图,边有权,加边.修改(增加的边 ...
- 从大数据平台CDP的架构看大数据的发展趋势
CDP(Cloudera Data Platform)是Cloudera 和 HortonWorks 合并后推出的新一代大数据平台 ,并正在逐步停止对原有的大数据平台 CDH 和 HDP 的维护.笔记 ...
- kali使用apt-get update 出现数字签名失效
kali使用apt-get update 出现数字签名失效 下载签名:wget archive.kali.org/archive-key.asc 安装签名:apt-key add archive-ke ...
- Ubuntu 一直卡在开机界面或者用户登录界面死循环问题的解决
此方法并不全部通用,根据自己实际情况 建议提前快照再试试此方法 原因:NVIDIA 驱动所致,之前安装方式nvidia驱动出问题. 解决办法:卸载nvidia驱动,重新安装. (1)进入文本模式:CT ...