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 |
瀏覽器相容性
載入中…