網頁跟隨系統 dark mode （暗黑模式） 的實現
經過幾十年的沉默， dark mode（暗黑模式） 又回到了我們面前，越來越多的 APP 有了暗黑主題，越來月多的作業系統原生添加了 “全域性暗黑模式”， 那麼一個網站如何跟隨系統的腳步， 該用暗黑模式的時候就用暗黑模式顯示，該用明亮模式就用明亮主題渲染呢？
我在搜尋引擎中檢索發現了一篇關於 dark mode 的文章， 其標題是 《Hello darkness, my old friend》， 作者是 Thomas Steiner。
文中介紹了有關於為什麼要有 dark mode， 怎樣在網頁中實現 dark mode 等內容。下面我把我學到的分享出來。
來玩一下
可以修改你的系統明亮/暗黑模式偏好，然後觀察這裡的文字。
黑夜給了我黑色眼睛，我卻用它去尋找光明。
查詢
對於查詢 Web 瀏覽器是否支援 ｄａｒｋ ｍｏｄｅ，作者提供了下面的媒體查詢程式碼：
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('Dark mode is supported');
}
位一個網站適配 dark mode 模式同樣依靠 CSS 媒體查詢。
作者的思路是把關於網頁 dark mode 與 light mode 差異的程式碼放到 dark.css 與 light.css 裡， 把其他樣式放入 style.css 中去，接著在使用外部連結的方式把它們連結進來，對 dark.css
我也寫了一個小demo， 程式碼如下。
index.html：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>明亮/暗黑模式 Demo</title>
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<link rel="stylesheet" href="/style.css">
<body>
<div class="main" role="main">
<p>黑夜給了我黑色眼睛，我卻用它去尋找光明。</p>
</div>
</body>
</html>
這裡的重點是怎麼引入 CSS 樣式檔案的。
dark.css：
/* dark mode style */
body {
color: #999;
background-color: #222;
}
light.css：
/* dark mode style */
body {
color: #333;
background-color: #DDD;
}
style.css：
/* style */
.main {
margin:50px 80px 20px;
}
支援情況
以下作業系統擁有 ｄａｒｋ ｍｏｄｅ 的開關：
-
Windows 10 1809， 1903+
-
Mac OS X 10.14+
-
iOS 13/ iPad OS 13+
-
Android 10+
支援 CSS 媒體查詢的瀏覽器：
-
Chrome/Microsoft Edge（Chromium） 76+
-
FireFox 67+
-
Safari 12.1+（在 Mac OS 上） 貨 13+ （在 iOS 與 iPad OS 上）
基本上主流瀏覽器和作業系統都對 dark mode 做了支援。
後記
最後我們聊一下 dark mode 有什麼意義吧。
計算機遠古時期因為螢幕技術的限制，迫不得已使用黑底白字的介面。等技術發展了，白底黑字就開始統治了所有的 UI 介面，兒如今 dark mode 又是一種流行。怎麼有一些迴圈的意思呢？
-
對於 OLED 螢幕來說， 深色的介面可以幫助節省電能；
-
幫助人們晚上方便地閱讀資訊；
-
對某些示例障礙人士很友好。
因為本人是一名視障學生的原因，我身邊的低視力同學對深色介面的確是偏愛有加的。 ｄａｒｋ ｍｏｄｅ 這樣的設計，既可以讓大多數人受益，也可以讓小部分人受益，難道這不是最大的意義嗎？
正如有人所說：“科技不為多數人，也不為少數人，它屬於我們所有人。” 這就是最好的設計吧！