color-scheme
color-scheme CSS 屬性允許元素指示它可以舒適地渲染的配色方案。使用者代理會更改 UI 介面以下方面以匹配所使用的配色方案：
- 畫布表面的顏色。
- 捲軸和其他互動 UI 的預設顏色。
- 表單控制元件的預設顏色。
- 其他瀏覽器提供的 UI 的預設顏色，例如“拼寫檢查”下劃線。
元件作者必須使用 prefers-color-scheme 媒體功能來支援其餘元素的配色方案。
作業系統配色方案的常見選擇是“淺色”和“深色”，或“日間模式”和“夜間模式”。當用戶選擇這些配色方案中的一種時，作業系統會調整使用者介面。這包括表單控制元件、捲軸以及CSS 系統顏色的使用值。
試一試
color-scheme: normal;
color-scheme: dark;
color-scheme: light;
<section class="default-example container" id="default-example">
<textarea id="example-element">Text Area</textarea>
</section>
#example-element {
width: 80%;
height: 50%;
}
語法
css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;
/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
color-scheme 屬性的值必須是以下關鍵字之一。
值
正式定義
正式語法
color-scheme =
normal |
[ light | dark | <custom-ident> ]+ && only?
示例
宣告配色方案偏好
要讓整個頁面採用使用者的配色方案偏好，請在 :root 元素上宣告 color-scheme。
css
:root {
color-scheme: light dark;
}
要讓特定元素採用使用者的配色方案偏好，請在這些元素上宣告 color-scheme。
css
header {
color-scheme: only light;
}
main {
color-scheme: light dark;
}
footer {
color-scheme: only dark;
}
除了上述 CSS，還要在任何 CSS 樣式資訊之前，在 <head> 中包含 <meta name="color-scheme"> HTML <meta> 標籤，以告知使用者代理首選的配色方案，從而有助於防止頁面載入時出現不必要的螢幕閃爍。
基於配色方案的樣式
要根據配色方案偏好設定元素樣式，請使用 prefers-color-scheme 媒體查詢。下面的示例透過 color-scheme 屬性使整個頁面採用淺色和深色作業系統配色方案，然後使用 prefers-color-scheme 為這些配色方案中的單個元素指定所需的前景和背景顏色。
css
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.element {
color: black;
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.element {
color: white;
background-color: black;
}
}
或者，使用 light-dark() <color> 函式，以更緊湊的程式碼結構為不同的配色方案設定前景和背景顏色。
css
:root {
color-scheme: light dark;
}
.element {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
規範
| 規範 |
|---|
| CSS 顏色調整模組級別 1 # color-scheme-prop |
瀏覽器相容性
載入中…
另見
prefers-color-scheme媒體查詢用於檢測使用者對配色方案的偏好。light-dark()顏色函式用於設定淺色和深色配色方案的顏色。- 其他與顏色相關的屬性：
color、accent-color、background-color、border-color、outline-color、text-decoration-color、text-emphasis-color、text-shadow、caret-color和column-rule-color background-imageprint-color-adjust- 使用相對顏色