系統顏色可根據目前使用的 color-scheme
值做出反應。light-dark()
函式會向作者公開相同的功能。
CSS 中的系統顏色
在 CSS 中,您可以使用眾多色域中的多種顏色。例如,您可以使用具名顏色、十六進位顏色、連結至特定色域的色彩函式,以及較通用的 color()
函式。
舉例來說,命名顏色 cornflowerblue
也可以表示為 #6495ED
、hsl(218.54deg 79.19% 66.08%)
或 color(display-p3 0.43 0.58 0.9)
。
除了上述各種名稱和格式,CSS 還加入系統顏色所述的顏色 (如 CSS 色彩模組層級 4 所述)。這些系統顏色是由瀏覽器定義的顏色,以關鍵字表示。
舉例來說,系統顏色 Canvas
(不與 <canvas>
元素混淆) 代表「應用程式內容或文件的背景」。可與 配合,且應與 CanvasText
搭配使用,代表「應用程式內容或文件中的文字」。
在 CSS 中,可以按照下列方式使用:
body {
color: CanvasText;
background-color: Canvas;
}
根據預設,CanvasText
會產生接近 black
的顏色,而 Canvas
是接近 white
的顏色。實際導入方式視瀏覽器而定。舉例來說,Chrome 中的 CanvasText
會顯示 #121212
,而 Safari 則指定為較淺的 #1e1e1e
。
這些系統顏色的隱藏功能是,它可以回應 color-scheme
屬性的計算值。例如,當使用的 color-scheme
為 dark
時,CanvasText
和 Canvas
的值會翻轉。
:root {
color-scheme: dark;
}
body {
color: CanvasText;
background-color: Canvas;
}
在下方示範中,您可以變更 :root
上設定的 color-scheme
值,並查看網頁的回應情形。
- 如果設為
light dark
,表示該元素支援淺色和深色模式。請根據prefers-color-scheme
媒體條件的值,選擇要使用的值。 - 如果設為
light
,表示元素支援淺色配置。 - 如果設為
dark
,表示該元素支援深色色彩配置。
隆重推出 light-dark()
直到目前為止,回應使用的 color-scheme
值是保留給系統色彩使用的內容。透過 CSS 色彩模組層級 5 中指定的 light-dark()
,您現在可以擁有相同的功能。
light-dark()
是一個可接受兩個引數的函式,兩個引數都必須是 <color>
。系統會根據使用的色彩配置,選擇兩者之一。
- 如果使用的色彩配置為
light
或未知,系統會傳回第一個值的計算值。 - 如果使用的色彩配置為
dark
,系統會傳回第二個色彩的計算值。
light-dark()
的結果為 <color>
。只要是接受 <color>
的地方,都可以在 CSS 中使用。例如,在 color
和 background-color
屬性中,也在函式 (例如 linear-gradient()
) 中。
在以下範例中,使用的背景顏色為深色模式的 #333
,在淺色模式 (或不明模式) 中為 #ccc
。
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#ccc, #333);
}
請注意,您必須指定 color-scheme
,light-dark()
才能正常運作。由於該屬性會繼承而來,因此通常在 :root
上進行設定,但您也可以選擇在特定元素上設定該屬性。
實務應用
在以下範例中,有幾個自訂屬性代表網頁上的顏色。為了配合深色模式,系統會在 prefers-color-scheme
媒體條件中以不同的值覆寫這些自訂屬性的值。
:root {
--primary-color: #333;
--primary-background: #e4e4e4;
--highlight-color: hotpink;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fafafa;
--primary-background: #121212;
--highlight-color: lime;
}
}
借助 light-dark()
,這個程式碼可以簡化。由於 :root
的 color-scheme
已設為 light dark
,因此當 OS 從淺色模式變更為深色模式時,這些色彩的值會自動變更。
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
此外,還可以將 color-scheme
設為 dark
或 light
,強制讓 DOM 的特定子樹狀結構只使用淺色或深色模式。在以下範例中,這會套用至 :root
。