light-dark()
light-dark() CSS <color> 函式 允許為屬性設定兩種顏色——透過檢測開發者是否設定了淺色或深色配色方案，或者使用者是否請求了淺色或深色主題，來返回這兩種顏色選項之一——而無需將主題顏色封裝在 prefers-color-scheme 媒體特性 查詢中。使用者可以透過其作業系統設定（例如，淺色或深色模式）或其使用者代理設定來指示其配色方案偏好。light-dark() 函式允許提供兩個顏色值，其中接受任何 <color> 值。如果使用者偏好設定為 light 或未設定偏好，light-dark() CSS 顏色函式返回第一個值；如果使用者偏好設定為 dark，則返回第二個值。
要啟用對 light-dark() 顏色函式的支援，color-scheme 必須具有 light dark 值，通常在 :root 偽類上設定。
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
語法
/* Named color values */
color: light-dark(black, white);
/* RGB color values */
color: light-dark(rgb(0 0 0), rgb(255 255 255));
/* Custom properties */
color: light-dark(var(--light), var(--dark));
值
函式式表示法：light-dark(light-color, dark-color)
light-color-
用於淺色
color-scheme的<color>值。 dark-color-
用於深色
color-scheme的<color>值。
正式語法
<light-dark()> =
light-dark( <color> , <color> )
示例
根據配色方案設定顏色
預設情況下，在支援的瀏覽器中，light-dark() 顏色函式返回的顏色取決於透過作業系統設定（例如，淺色或深色模式）或使用者代理設定的使用者偏好。您還可以在瀏覽器的開發者工具中更改此設定。
HTML
我們包含三個部分，以啟用針對淺色、深色以及根據使用者首選配色方案選擇的顏色。
<h1><code>light-dark()</code> CSS function</h1>
<section>
<h2>Automatic</h2>
<p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
<h2>Light</h2>
<p>
This section will be light due to the <code>color-scheme: light;</code>.
</p>
</section>
<section class="dark">
<h2>Dark</h2>
<p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>
CSS
我們為淺色和深色主題都包含了顏色。我們還在 :root 上定義了文件的 color-scheme，以啟用整個文件的 light-dark() 顏色函式。
:root {
/* this has to be set to switch between light or dark */
color-scheme: light dark;
--light-bg: ghostwhite;
--light-color: darkslategray;
--light-code: tomato;
--dark-bg: darkslategray;
--dark-color: ghostwhite;
--dark-code: gold;
}
* {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
code {
color: light-dark(var(--light-code), var(--dark-code));
}
除了啟用 light-dark() 函式，color-scheme 屬性還允許覆蓋文件部分的顏色方案。透過將 color-scheme 屬性設定為 light 或 dark，可以將頁面部分強制為僅使用淺色或深色配色方案。
注意：通常不應這樣做，我們在此處僅用於演示目的。如果使用者已做出偏好，通常不應覆蓋他們的偏好。
.light {
/* forces light color-scheme */
color-scheme: light;
}
.dark {
/* forces dark color-scheme */
color-scheme: dark;
}
結果
規範
| 規範 |
|---|
| CSS 顏色模組第五版 # light-dark |
瀏覽器相容性
載入中…