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 中強制執行這個測試。方法如下：

打開 Firefox，然后在地址欄中鍵入 about:config ，然后按 Enter。

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

在搜索欄中，搜索 ui.systemUsesDarkTheme 。 將復選框更改為 number 并單擊 + 符號。 將值更改為 1 并單擊 tick 按鈕。

現在頁面應該變黑。

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

如果您想要測試它是否切換回來，請將值更改為 0 。

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

以上是“CSS變量如何實現暗黑模式”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！