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 − 此值表示深色主题。

语法

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>

打印页面