依 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 代表「應用程式內容或文件中的文字」，CanvasText 與 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);
}

請注意，為了讓 light-dark() 正常運作，您必須指定 color-scheme。由於該屬性繼承，您通常在 :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。