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

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

在 CSS 中,您可以使用多個色彩空間中的多種顏色。例如,您可以使用命名顏色、十六進位顏色、與特定色域相關聯的顏色函式,以及更通用的 color() 函式。

舉例來說,命名為 cornflowerblue 的顏色也可以表示為 #6495EDhsl(218.54deg 79.19% 66.08%)color(display-p3 0.43 0.58 0.9)

除了這些名稱和格式外,CSS 也包含稱為「系統顏色」的顏色,這類顏色在 CSS 顏色模組第 4 級中有所規定。這些系統顏色是由瀏覽器定義,並以關鍵字表示。

舉例來說,系統顏色 Canvas (請勿與 <canvas> 元素混淆) 代表「應用程式內容或文件的背景」。CanvasText 代表「應用程式內容或文件中的文字」,CanvasTextCanvasText 搭配使用效果最佳,也應搭配使用。

在 CSS 中,您可以使用以下方式:

body {
  color: CanvasText;
  background-color: Canvas;
}

根據預設,CanvasText 會產生接近 black 的顏色,而 Canvas 則是接近 white 的顏色。實際實作方式取決於瀏覽器。舉例來說,Chrome 中的 CanvasText 會顯示為 #121212,而 Safari 則會將其指定為稍亮的 #1e1e1e

這些系統顏色的隱藏功能是,它們可以回應 color-scheme 屬性的計算值。舉例來說,如果使用的 color-schemedarkCanvasTextCanvas 的值會互換。

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

在以下示範中,您可以變更 :root 上設定的 color-scheme 值,並查看網頁的回應方式。

  • 設定為 light dark 時,表示元素同時支援淺色和深色模式。您選擇使用的值,取決於 prefers-color-scheme 媒體條件的值。
  • 如果設為 light,表示元素支援淺色色彩配置。
  • 如果設為 dark,表示元素支援深色色彩配置。
可讓您變更 color-scheme 值的頁面。變更後,即使 body 元素的宣告保持不變,頁面的顏色也會從淺色變深色,或從深色變淺色。

隆重推出 light-dark()

瀏覽器支援

  • Chrome:123。
  • Edge:123。
  • Firefox:120。
  • Safari:17.5。

資料來源

在此之前,系統顏色會回應已使用的 color-scheme 值。在 CSS 色彩模組第 5 級中指定的 light-dark() 可讓您擁有相同的功能。

light-dark() 是可接受兩個引數的函式,兩者都必須是 <color>。系統會根據所使用的色彩配置,選擇其中一種顏色。

  • 如果使用的配色方案為 light 或不明,則會傳回第一個值的計算值。
  • 如果使用的配色方案為 dark,則會傳回第二個顏色的計算值。

light-dark() 的結果是 <color>。在 CSS 中,您可以在 <color> 接受的任何位置使用此屬性。例如 colorbackground-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;
  }
}
透過 prefers-color-scheme 回應淺色或深色模式的頁面。
使用媒體查詢在 CSS 中變更顏色值。

有了 light-dark(),這段程式碼就能簡化。由於 color-scheme:root 上設為 light dark,因此當作業系統從淺色模式變更為深色模式,反之亦然時,這些顏色的值就會自動變更。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
使用 prefers-color-scheme 回應淺色或深色模式的網頁。
顏色值會使用 light-dark() 變更。

另外,您也可以將 color-scheme 設為 darklight,強制 DOM 的特定子樹只使用淺色或深色模式。在以下範例中,這會套用至 :root

使用 prefers-color-scheme 回應淺色或深色模式的頁面。
使用 light-dark() 變更顏色值。
您可以使用其中一個選項強制淺色或深色模式。這可透過操控 color-scheme 值來達成。