[[433264]]

讓你的網站根據用戶選擇的主題進行調整的能力是一個很棒的輔助功能。

你可能已經熟悉媒體查詢media query了。它們被廣泛地用于使網站具有響應性。width 和 height 屬性包含視區的尺寸。然后，你可以使用 CSS 在不同的尺寸下呈現不同的布局。

prefers-color-scheme 媒體查詢 的工作方式與此相同。用戶可以將他們的操作系統配置為使用淺色或深色主題。prefers-color-scheme 包含這個值。該值是 light 或 dark ，盡管 W3C 規范指出它可能支持未來的值，如 sepia。我為這兩種模式指定不同的 CSS 變量值，讓用戶的操作系統來決定。

prefers-color-scheme 媒體查詢

prefers-color-scheme 媒體查詢的兩種變化是:

/* Light mode */
@media (prefers-color-scheme: light) {
   :root {
       --body-bg: #FFFFFF;
       --body-color: #000000;
   }
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的 CSS 中，--body-bg 和 --body-color 是 CSS 變量。正如你所看到的，它們對兩種模式都包含不同的值。在淺色主題中，我設置了一個白色背景和黑色文本。在深色主題中，我設置了黑色背景和白色文本。

因為規范說 W3C 可能會引入未來的值，所以把這個 CSS 轉換為默認值是有意義的。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

在上面的代碼中，我默認定義了一個淺色主題，如果媒體查詢是 dark，則將其轉換為深色主題。這樣一來，以后任何添加到媒體查詢的值都會默認設置為淺色主題。

使用 CSS 變量

現在我為不同的主題設置了不同的值，我需要實際使用它們來設計頁面。

body {
   background: var(--body-bg);
   color: var(--body-color);
}

var() 語法 是 CSS 使用變量的方式。在上面的代碼中，我是說把 background 設置為 --body-bg 的值，把 color 設置為 --body-color 的值。注意，這些變量的值來自媒體查詢。這意味著背景和前景的顏色是根據操作系統的設置而改變的！

這就是媒體查詢的真正能力。提供一個從操作系統到網頁的一致的用戶體驗。

如果你進入 findmymastodon.com，并切換你的操作系統的主題，你會看到從一個主題到另一個主題的過渡。

CSS 工作組 網站也使用同樣的媒體查詢。改變你的操作系統主題，網站就會切換主題來進行調整。

結論

請注意，使用 prefers-color-scheme 與使用普通的編程語言沒有什么不同。我定義了一些變量，這些變量的值根據一些邏輯而改變。而這些變量然后被用于進一步的操作。

讓你的網站根據用戶選擇的主題進行調整的能力是一個很棒的輔助功能。而且，為了用戶的利益，它進一步模糊了桌面和網絡之間的界限。最新的瀏覽器版本 支持 prefers-color-scheme，所以你今天就可以開始實驗了。