CSS變量實現暗黑模式，個人小鋪頁面已經支持

最近微信被蘋果逼的開發了暗黑模式，愈來愈多的網站和應用開始支持了暗黑模式，許多人也喜歡爲網站選擇暗模式，也許他們更喜歡這樣的外觀，或者他們想讓本身的眼睛免受疲勞。這篇文章將告訴你如何實現一個自動的 CSS 暗模式，根據你的訪客的主題來改變。

我在本身的博客頁面個人小鋪頁面實踐了一下用 CSS變量 和 @media查詢 實現暗黑模式。

CSS Dark Mode

我定義了變量以設置主題的顏色，我建議你也這樣作，由於這樣會使這個過程容易得多。個人默認模式的顏色變量以下:

:root {
  --accent: #226997;
  --main: #333;
  --light: #666;
  --lighter: #f3f3f3;
  --border: #e6e6e6;
  --bg: #ffffff;
}
複製代碼

若是你想在你的樣式表中使用這些變量，你能夠這樣作:

p {
  color: var(--main);
}
複製代碼

這樣，若是您想更改主題的顏色，則只需修改定義的變量，全部使用該變量的內容都會更新。

如今咱們須要定義一組新的變量，這些變量將在調用 CSS 暗模式時使用。

/* 定義 dark 模式的顏色 */
:root {
  --accent: #3493d1;
  --main: #f3f3f3;
  --light: #ececec;
  --lighter: #666;
  --border: #e6e6e6;
  --bg: #333333;
}
複製代碼

添加 Dark 式支持

如今，咱們定義了兩組變量，剩下要作的唯一一件事就是將 preferences -color-scheme 媒體查詢添加到咱們的 dark 變量中。

帶上 Dark 顏色變量並在下面添加 @media 查詢：

/* 定義 dark 模式的顏色 */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}
複製代碼

就是這樣！若是有人使用深色操做系統主題並訪問您的網站，您的網站如今將自動切換到黑暗模式。

測試

我相信您會但願測試這種更改是否有效。爲此，您能夠簡單地在操做系統上啓用一個 dark 主題，例如 iOS dark 主題。

或者，若是你不想在你的操做系統主題上浪費時間，你能夠在 Firefox 中強制執行這個測試。方法以下：

1. 打開 Firefox，而後在地址欄中鍵入 about:config，而後按 Enter。

2. 你將被要求承擔風險，接受它。

3. 在搜索欄中，搜索 ui.systemUsesDarkTheme。

4. 將複選框更改成 number 並單擊 + 符號。

5. 將值更改成 1 並單擊 tick 按鈕。

6. 如今頁面應該變黑。

7. 回到您的網站，主題應該已自動更新爲黑暗模式。

8. 若是您想要測試它是否切換回來，請將值更改成 0。

9. 完成測試後，單擊垃圾桶刪除該選項。

---

如今，您應該擁有一個網站，該網站不只在移動界面方面具備響應能力，並且在主題方面也具備響應能力。我敢確定，您的深夜訪客或只喜歡深色主題網站的訪客會感謝您。

---

參考原文：kevq.uk/how-to-add-…

翻譯：Dunizb