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>

列印頁面