prefers-color-scheme

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中可用： 2020 年 1 月.

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 文档。

语法

light

表示用户已通知他们偏好具有浅色主题的界面，或者没有表达主动偏好。

dark

表示用户已通知他们偏好具有深色主题的界面。

示例

检测深色或浅色主题

一种常见用法是默认使用浅色方案，然后使用 prefers-color-scheme: dark 将颜色覆盖到更暗的变体。也可以反过来做。

此示例展示了两种选项：主题 A 使用浅色，但可以覆盖为深色。主题 B 使用深色，但可以覆盖为浅色。最终，如果浏览器支持prefers-color-scheme，则两种主题都将是浅色或深色。

HTML

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（棕色）默认使用浅色方案，但会根据媒体查询切换到深色方案。

css
.theme-a {
  background: #dca;
  color: #731;
}
@media (prefers-color-scheme: dark) {
  .theme-a.adaptive {
    background: #753;
    color: #dcb;
    outline: 5px dashed #000;
  }
}

主题 B（蓝色）默认使用深色方案，但会根据媒体查询切换到浅色方案。

css
.theme-b {
  background: #447;
  color: #bbd;
}
@media (prefers-color-scheme: light) {
  .theme-b.adaptive {
    background: #bcd;
    color: #334;
    outline: 5px dotted #000;
  }
}

结果

左侧方框显示了主题 A 和主题 B 在没有prefers-color-scheme媒体查询的情况下显示的样子。右侧方框显示了相同的主题，但其中一个会根据用户的活动颜色方案更改为更深或更浅的变体。如果某个方框是根据您的浏览器或操作系统的设置更改的，则其轮廓将为虚线或点线。

颜色方案继承

以下示例展示了如何将prefers-color-scheme与从父元素继承的color-scheme 属性一起使用。一个脚本用于设置<img>元素及其alt属性的源。这通常在 HTML 中以<img src="circle.svg" alt="circle" />的形式完成。

您应该会看到三个圆圈，其中一个以不同的颜色绘制。第一个圆圈从操作系统继承color-scheme，可以使用系统操作系统的主题切换器进行切换。

第二个和第三个圆圈从嵌入元素继承color-scheme；@media查询允许根据父元素的color-scheme设置 SVG 内容的样式。在本例中，具有color-scheme CSS 属性的父元素是<div>。

html
<div>
  <img />
</div>

<div style="color-scheme: light">
  <img />
</div>
<div style="color-scheme: dark">
  <img />
</div>

<!-- Embed an SVG for all <img> elements -->
<script>
  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>
    `);
  }
</script>

规范

规范
媒体查询级别 5
# prefers-color-scheme

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅