最近微信被蘋果逼的開發(fā)了 暗黑模式 ，越來越多的網(wǎng)站和應(yīng)用開始支持了暗黑模式，許多人也喜歡為網(wǎng)站選擇暗模式，也許他們更喜歡這樣的外觀，或者他們想讓自己的眼睛免受疲勞。 這篇文章將告訴你如何實(shí)現(xiàn)一個(gè)自動(dòng)的 CSS 暗模式，根據(jù)你的訪客的主題來改變。

我在自己的博客頁面 我的小鋪 [1] 頁面實(shí)踐了一下用 CSS變量 和 @media查詢 實(shí)現(xiàn)暗黑模式。

CSS Dark Mode

我定義了變量以設(shè)置主題的顏色，我建議你也這樣做，因?yàn)檫@樣會使這個(gè)過程容易得多。我的默認(rèn)模式的顏色變量如下:

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

如果你想在你的樣式表中使用這些變量，你可以這樣做:

p {
  color: var(--main);
}

這樣，如果您想更改主題的顏色，則只需修改定義的變量，所有使用該變量的內(nèi)容都會更新。

現(xiàn)在我們需要定義一組新的變量，這些變量將在調(diào)用 CSS 暗模式時(shí)使用。

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

添加 Dark 式支持

現(xiàn)在，我們定義了兩組變量，剩下要做的惟一一件事就是將 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;
  }
}

就是這樣！如果有人使用深色操作系統(tǒng)主題并訪問您的網(wǎng)站，您的網(wǎng)站現(xiàn)在將自動(dòng)切換到黑暗模式。

我相信您會希望測試這種更改是否有效。為此，您可以簡單地在操作系統(tǒng)上啟用一個(gè) dark 主題，例如 iOS dark 主題。

或者，如果你不想在你的操作系統(tǒng)主題上浪費(fèi)時(shí)間，你可以在 Firefox 中強(qiáng)制執(zhí)行這個(gè)測試。方法如下：

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

你將被要求承擔(dān)風(fēng)險(xiǎn)，接受它。

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

現(xiàn)在頁面應(yīng)該變黑。

回到您的網(wǎng)站，主題應(yīng)該已自動(dòng)更新為黑暗模式。

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

完成測試后，單擊垃圾桶刪除該選項(xiàng)。

 到此這篇關(guān)于CSS變量實(shí)現(xiàn)暗黑模式的示例代碼的文章就介紹到這了,更多相關(guān)CSS暗黑模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論