一個深色模式的簡單 CSS 技巧

你可能已經熟悉 媒體查詢 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，所以你今天就可以開始實驗了。

編碼愉快。

這篇文章最初發表在 作者的網站 上，經許可後重新發表。

via: https://opensource.com/article/21/10/dark-themes-websites

作者：Ayush Sharma 選題：lujun9972 譯者：geekpi 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive