依 CSS 色彩配置相依的顏色搭配 light-dark()

系統顏色可根據目前使用的 color-scheme 值做出反應。light-dark() 函式會向作者公開相同的功能。

Bramus

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。