經過幾十年的沉默， 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 和 light.css 的鏈接標簽添加 media 媒體查詢屬性，
我也寫了一個小demo， 代碼如下，
index.html：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>明亮/暗黑模式 Demo</title>
<link rel="stylesheet" href="https://www.cnblogs.com/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="https://www.cnblogs.com/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<link rel="stylesheet" href="https://www.cnblogs.com/style.css">
<body>
<div 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 螢屏來說， 深色的界面可以幫助節省電能；
-
幫助人們晚上方便地閱讀資訊；
-
對某些示例障礙人士很友好，
因為本人是一名視障學生的原因，我身邊的低視力同學對深色界面的確是偏愛有加的， ｄａｒｋ ｍｏｄｅ 這樣的設計，既可以讓大多數人受益，也可以讓小部分人受益，難道這不是最大的意義嗎？
正如有人所說：“科技不為多數人，也不為少數人，它屬于我們所有人，” 這就是最好的設計吧！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445371.html
標籤：其他
上一篇：VSCODE 擴展之 Debugger for Firefox 的使用
下一篇：垂直選單中沒有對齊和缺少專案