[[433264]]

讓你的網(wǎng)站根據(jù)用戶選擇的主題進(jìn)行調(diào)整的能力是一個(gè)很棒的輔助功能。

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

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

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 變量。正如你所看到的，它們對兩種模式都包含不同的值。在淺色主題中，我設(shè)置了一個(gè)白色背景和黑色文本。在深色主題中，我設(shè)置了黑色背景和白色文本。

因?yàn)?a class="ext" rel="external nofollow" target="_blank">規(guī)范說 W3C 可能會(huì)引入未來的值，所以把這個(gè) CSS 轉(zhuǎn)換為默認(rèn)值是有意義的。

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

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

使用 CSS 變量

現(xiàn)在我為不同的主題設(shè)置了不同的值，我需要實(shí)際使用它們來設(shè)計(jì)頁面。

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

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

這就是媒體查詢的真正能力。提供一個(gè)從操作系統(tǒng)到網(wǎng)頁的一致的用戶體驗(yàn)。

如果你進(jìn)入 findmymastodon.com，并切換你的操作系統(tǒng)的主題，你會(huì)看到從一個(gè)主題到另一個(gè)主題的過渡。

CSS 工作組 網(wǎng)站也使用同樣的媒體查詢。改變你的操作系統(tǒng)主題，網(wǎng)站就會(huì)切換主題來進(jìn)行調(diào)整。

結(jié)論

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

讓你的網(wǎng)站根據(jù)用戶選擇的主題進(jìn)行調(diào)整的能力是一個(gè)很棒的輔助功能。而且，為了用戶的利益，它進(jìn)一步模糊了桌面和網(wǎng)絡(luò)之間的界限。最新的瀏覽器版本 支持 prefers-color-scheme，所以你今天就可以開始實(shí)驗(yàn)了。