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 ...
随机推荐
- 阿里云数据库开源重磅发布：PolarDB HTAP的功能特性和关键技术
简介:在3月2日的阿里云开源 PolarDB 企业级架构发布会上,阿里云 PolarDB 内核技术专家严华带来了主题为<PolarDB HTAP详解>的精彩演讲.在PolarDB存储计算分 ...
- sysAK（青囊）系统运维工具集：如何实现高效自动化运维？| 龙蜥技术
简介:What is sysAK.典型工具介绍.开源 3 方面介绍了 sysAK 系统,目前 sysAK 工具集已经在龙蜥社区开源,并且在系统运维 SIG.跟踪诊断 SIG 一起共建,希望大家后期加 ...
- [Py] Python 接口数据用 pandas 高效写入 csv
通过 pandas 把 dict 数据封装,调用接口方法写入 csv 文件. import pandas as pd data = [{"name": "a"} ...
- 本周ddl（4.1-4.5）
本周ddl(4.1-4.5) cs61a首先完成2.23之前的任务 cs61a完成3.1之前的学习 cs61a完成3.8任务并且ants完成阶段1 csapp的bomblab 记录南京5个景点及其周边 ...
- GtkSharp 设置窗口背景透明
本文告诉大家如何在 GTK Sharp 里面设置窗口背景透明 在 GTK 里面设置窗口背景透明十分简单,只需使用如下代码即可 this.AppPaintable = true; var screen ...
- 国产ChatGPT
随着ChatGPT的威名席卷全球,大洋对岸的中国厂商也纷纷亮剑,各式本土大模型你方唱罢我登场,声势浩大的发布会排满日程表.
- Pytorch入门—Tensors张量的学习
Tensors张量的学习 张量是一种特殊的数据结构,与数组和矩阵非常相似.在PyTorch中,我们使用张量来编码模型的输入和输出,以及模型的参数. 张量类似于NumPy的ndarrays,只是张量可以 ...
- JAVA基础-流程控制、字符串
一.java基础 1.java主类结构 package com.study.again001; 包名public class helloword { 类名 static String s1 = &qu ...
- 前端使用 Konva 实现可视化设计器（9）- 另存为SVG
请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue 哟~ github源码 gitee源码 示例地址 另存为SVG 这一章增强了另存为的能力,实现" ...
- Mac Docker 挂载数据卷失败
问题描述: docker: Error response from daemon: Mounts denied: The path /srv/docker/bind is not shared fro ...