我如何將暗模式添加到我的網站

分步說明製作網站的2個版本,使其適合白天和晚上使用

Dark mode

更新:我現在使用媒體查詢級別5:prefers-color-scheme

Media Queries Level 5規格包含一個新的prefers-color-scheme媒體功能。

目前所有主要瀏覽器都支持此功能。自76版以來的Chrome / Edge,自67版以來的Firefox和Safari(自版本12.1起)。即使是iOS Safari,

我們可以使用它來判斷用戶是在暗還是亮模式下瀏覽頁面:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

現在,我默認使用它來顯示站點的淺色版本,如果系統處於黑暗模式,則使用深色版本。

如果系統沒有內置暗模式(舊的Windows / macOS,Linux),那麼我的建議是使用擴展名,例如夜眼或類似。

我之前如何實現暗模式prefers-color-scheme可用

我最近重新設計了我的網站。這是2張圖片,以供參考:

Old homepage

Old post page

我差不多是在1年前設計這個網站的,並且在此過程中進行了許多更改,就像我們對任何網站所做的一樣。

最終我長大了這個設計:標題太大了,失去了太多的空間而不是直接顯示內容,等等。

我昨天晚上坐下來,開始重新設計網站,今天早上我完成了重新設計:

New homepage

New post page

好多了!最重要的是內容更加突出。

我使用等寬字體(Inconsolata)是因為它是一個不錯的編程博客,儘管由於使用字體降低了可讀性並增加了頁面大小,因為該字體在我的網站上。我更喜歡它,並且由於我的網站是我日常活動的重要組成部分,因此我希望它能像我想要的那樣。

我只是錯過了一件事:暗模式。在重新設計的過程中,我想到了暗模式選項。

我是怎麼做的?首先,我在側邊欄中添加了Moon Emoji Moon,以使人們將模式從淺色更改為深色。

然後,我添加了一個在單擊時運行的JavaScript代碼段。我剛剛將其添加到onclick在HTML中內聯事件處理程序,而無需花心思:

<p>
  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light
</p>

這是在onclick中運行的JavaScript:

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

這有點令人費解,但基本上我會檢查mode物業本地存儲為“暗”(如果尚未設置,則默認為暗,使用||運算符),然後在本地存儲設備中設置與之相反的值。

然後我分配dark上課bodyHTML元素,因此我們可以使用CSS在深色模式下為頁面設置樣式。

DOM加載後,另一個腳本立即運行,並檢查模式是否為暗。如果是這樣,它將添加dark上課bodyHTML元素:

document.addEventListener('DOMContentLoaded', (event) => {
  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
})

現在,如果人們更改模式,那麼下次加載頁面時,他們的選擇就會被記住。

然後,我在CSS中添加了很多CSS指令,所有指令均以body.dark。像這些:

body.dark {
  background-color: rgb(30,34,39);
  color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

現在事情應該已經正常了!這是我的網站處於黑暗模式:

Dark homepage

Dark post page

我添加了dark上課body元素默認情況下,使黑暗模式成為默認設置:

<body class="dark">
  ...
</body>

為什麼?首先,我更喜歡它。然後,我在Twitter上進行了一項民意調查,人們更喜歡它。

Poll

但這也是出於技術原因,實際上是一個非常簡單的原因。我不會在服務器端存儲用戶選擇的內容,因此在本地存儲可用之前,我無法知道模式。

如果該站點是在服務器端生成的,那麼我可以這樣做,但是它是一個靜態站點,因此我總是向請求它的每個人提供相同的頁面。即使我有一個cookie,也沒有地方可以處理它(另一方面,這意味著我的頁面加載速度更快)。

因此,當某人導航到我網站上的另一個頁面,或在第二次訪問中首次加載該頁面時,我不想在確定模式時顯示明亮的頁面。也許訪客在半夜裡在暗室裡編碼。

我寧願在淺色模式下執行此操作:顯示深色頁面幾毫秒,然後再次將其變白。


更多實驗教程: