
- CSS 教程
- CSS - 首页
- CSS - 路线图
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 测量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图片
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - 块级边框
- CSS - 内联边框
- CSS - 外边距
- CSS - 列表
- CSS - 内填充
- CSS - 光标
- CSS - 轮廓
- CSS - 尺寸
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉菜单
- CSS - 可见性
- CSS - 溢出
- CSS - Clearfix
- CSS - 浮动
- CSS - 箭头
- CSS - 调整大小
- CSS - 引号
- CSS - 顺序
- CSS - 位置
- CSS - 连字符
- CSS - 悬停
- CSS - 显示
- CSS - 焦点
- CSS - 缩放
- CSS - 平移
- CSS - 高度
- CSS - 连字符字符
- CSS - 宽度
- CSS - 不透明度
- CSS - Z-Index
- CSS - 底部
- CSS - 导航栏
- CSS - 覆盖层
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - 属性选择器
- CSS - 组合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 计数器
- CSS - 剪切
- CSS - 书写模式
- CSS - Unicode-bidi
- CSS - min-content
- CSS - 全部
- CSS - 内嵌
- CSS - 隔离
- CSS - 滚动溢出
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - 指针事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大块级尺寸
- CSS - 最小块级尺寸
- CSS - 混合模式
- CSS - 最大内联尺寸
- CSS - 最小内联尺寸
- CSS - 偏移
- CSS - 重音色
- CSS - 用户选择
- CSS 高级
- CSS - 网格
- CSS - 网格布局
- CSS - Flexbox
- CSS - 可见性
- CSS - 定位
- CSS - 层
- CSS - 伪类
- CSS - 伪元素
- CSS - @规则
- CSS - 文本效果
- CSS - 分页媒体
- CSS - 打印
- CSS - 布局
- CSS - 验证
- CSS - 图片精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS3 - 教程
- CSS - 圆角
- CSS - 边框图片
- CSS - 多背景
- CSS - 颜色
- CSS - 渐变
- CSS - 盒阴影
- CSS - 盒装饰中断
- CSS - 光标颜色
- CSS - 文本阴影
- CSS - 文本
- CSS - 2D 变换
- CSS - 3D 变换
- CSS - 过渡
- CSS - 动画
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按钮
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 函数
- CSS - 数学函数
- CSS - 遮罩
- CSS - 形状
- CSS - 图片样式
- CSS - 特效性
- CSS - 自定义属性
- CSS 响应式
- CSS RWD - 简介
- CSS RWD - 视口
- CSS RWD - 网格视图
- CSS RWD - 媒体查询
- CSS RWD - 图片
- CSS RWD - 视频
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 转换器
- CSS - 颜色选择器和动画
- CSS 资源
- CSS - 有用资源
- CSS - 讨论
CSS 媒体特性 - prefers-color-scheme
CSS prefers-color-scheme 媒体特性用于确定用户是否偏好浅色或深色主题。用户可以在其设备设置或浏览器设置中选择其首选颜色模式,例如浅色或深色模式。
嵌入元素
您可以使用prefers-color-scheme CSS 特性根据嵌入它们的网页的颜色方案更改 SVG 和 iframe 的外观。SVG 必须用作图像(<img src="circle.svg" alt="circle" />),而不是直接放入 HTML 中。
跨域 SVG 和 iframe 也可以使用prefers-color-scheme。跨域元素是从您当前所在的网站以外的网站加载的元素。
可能的值
light − 此值表示浅色主题。
dark − 此值表示深色主题。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
语法
prefers-color-scheme: light|dark;
CSS prefers-color-scheme - light 值
以下示例演示即使用户在其操作系统设置中请求了浅色主题,该元素也将显示为紫色背景和蓝色文本:
<html> <head> <style> .light-theme { background-color: red; color: white; } @media (prefers-color-scheme: light) { .light-theme { background-color: violet; color: blue; } } </style> </head> <body> <div class="light-theme"> This is a light theme. </div> </body> </html>
CSS prefers-color-scheme - dark 值
以下示例演示该元素默认具有红色背景色和黑色文本颜色。即使用户在其操作系统设置中请求了深色主题,该元素也将显示为紫色背景和蓝色文本:
<html> <head> <style> .dark-theme { background-color: red; color: white; } @media (prefers-color-scheme: dark) { .dark-theme { background-color: violet; color: blue; } } </style> </head> <body> <div class="dark-theme"> This is a dark theme. </div> </body> </html>
CSS prefers-color-scheme - 检测深色或浅色主题
以下示例演示@media (prefers-color-scheme: dark) 和@media (prefers-color-scheme: light) 媒体查询将根据用户的首选颜色主题将不同的样式应用于 .theme 类:
<html> <head> <style> .theme { background: green; color: white; } @media (prefers-color-scheme: dark) { .theme.dark-theme { background: red; color: white; } } @media (prefers-color-scheme: light) { .theme.light-theme { background: yellow; color: blue; } } </style> </head> <body> <p class="theme">Default Theme. The element will be displayed as a green background with white text.</p> <p class="theme dark-theme">If the user has requested a dark color theme in their operating system the element will be displayed as a red background with white text.</p> <p class="theme light-theme">If the user has requested a light color theme in their operating system the element will be displayed as a yellow background with blue text.</p> </body> </html>
CSS prefers-color-scheme - 颜色方案继承
以下示例演示如何使用prefers-color-scheme CSS 媒体特性根据用户的首选颜色主题显示不同的 SVG 图片。
在此示例中,JavaScript 用于创建三个 SVG 图片:一个具有粉红色背景颜色,一个具有紫色背景颜色,另一个具有由用户的首选颜色主题确定的背景颜色。
这是一个例子:
<html> <head> </head> <body> <div> <img /> </div> <div style="color-scheme: light"> <img /> </div> <div style="color-scheme: dark"> <img /> </div> <script> document.querySelectorAll("img").forEach(function(img) { img.alt = "square"; img.src = "data:image/svg+xml;base64," + btoa(` <svg width="100" height="100" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <style> :root { color: pink } @media (prefers-color-scheme: light) { :root { color: violet } } </style> <rect fill="currentColor" x="2" y="2" width="16" height="16"/> </svg> `); }); </script> </body> </html>