prefers-color-scheme
Baseline 广泛可用 *
prefers-color-scheme CSS 媒体特性 用于检测用户是否请求了浅色或深色主题。用户通过操作系统设置（例如，浅色或深色模式）或用户代理设置来表明他们的偏好。
嵌入元素
对于 SVG 和 iframe，prefers-color-scheme 允许您根据网页中父元素的 color-scheme 为 SVG 或 iframe 设置 CSS 样式。SVG 必须作为嵌入式（即 <img src="circle.svg" alt="circle" />）使用，而不是 在 HTML 中内联。在 SVG 中使用 prefers-color-scheme 的示例可以在“嵌入元素中继承的颜色方案”部分找到。
允许在跨域 <svg> 和 <iframe> 元素中使用 prefers-color-scheme。跨域元素是指从与引用它们的页面不同的主机检索的元素。要了解有关 SVG 的更多信息，请参阅 SVG 文档；有关 iframe 的更多信息，请参阅 iframe 文档。
语法
示例
检测深色或浅色主题
一种常见用法是默认使用浅色方案，然后使用 prefers-color-scheme: dark 将颜色覆盖为深色变体。也可以反过来操作。
此示例显示了两种选项：主题 A 使用浅色，但可以被覆盖为深色。主题 B 使用深色，但可以被覆盖为浅色。最后，如果浏览器支持 prefers-color-scheme，则两个主题都将是浅色或深色。
HTML
<div class="box theme-a">Theme A (initial)</div>
<div class="box theme-a adaptive">Theme A (changed if dark preferred)</div>
<br />
<div class="box theme-b">Theme B (initial)</div>
<div class="box theme-b adaptive">Theme B (changed if light preferred)</div>
CSS
主题 A（棕色）默认使用浅色方案，但会根据媒体查询切换到深色方案
.theme-a {
background: #ddccaa;
color: #773311;
}
@media (prefers-color-scheme: dark) {
.theme-a.adaptive {
background: #775533;
color: #ddccbb;
outline: 5px dashed black;
}
}
主题 B（蓝色）默认使用深色方案，但会根据媒体查询切换到浅色方案
.theme-b {
background: #444477;
color: #bbbbdd;
}
@media (prefers-color-scheme: light) {
.theme-b.adaptive {
background: #bbccdd;
color: #333344;
outline: 5px dotted black;
}
}
结果
左侧方框显示了在没有 prefers-color-scheme 媒体查询的情况下主题 A 和主题 B 的外观。右侧方框显示了相同的主题，但其中一个将根据用户的活动颜色方案更改为更深或更浅的变体。如果其中一个方框根据您的浏览器或操作系统设置进行了更改，其轮廓将显示为虚线或点线。
嵌入元素中继承的颜色方案
以下示例展示了如何在嵌入元素中使用 prefers-color-scheme 媒体特性来继承父元素的颜色方案。脚本用于设置 <img> 元素的源及其 alt 属性。这通常会在 HTML 中完成，如 <img src="circle.svg" alt="circle" />。
您应该会看到三个圆圈，其中一个用不同的颜色绘制。第一个圆圈继承自操作系统的 color-scheme，可以使用系统操作系统的主题切换器进行切换。
第二个和第三个圆圈继承自嵌入元素的 color-scheme；@media 查询允许根据父元素的 color-scheme 设置 SVG 内容的样式。在本例中，具有 color-scheme CSS 属性的父元素是一个 <div>。
<div>
<img />
</div>
<div class="light">
<img />
</div>
<div class="dark">
<img />
</div>
.light {
color-scheme: light;
}
.dark {
color-scheme: dark;
}
// Embed an SVG for all <img> elements
for (let img of document.querySelectorAll("img")) {
img.alt = "circle";
img.src = `data:image/svg+xml;base64,${window.btoa(`
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<style>
:root { color: blue }
@media (prefers-color-scheme: dark) {
:root { color: purple }
}
</style>
<circle fill="currentColor" cx="16" cy="16" r="16"/>
</svg>
`)}`;
}
规范
| 规范 |
|---|
| 媒体查询 Level 5 # prefers-color-scheme |
浏览器兼容性
加载中…