作者|廖偉華(大貘)
出品|阿裡巴巴新零售淘系技術部
導讀：給網站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出現之後的一個熱門話題。社群中有關于這方面的讨論也很多，都在圍繞着怎麼給網站添加暗黑模式。今天在這篇文章再次和大家一起聊聊這個已久的話題，不同的是，這篇文章将和大家從不同的角度來聊怎麼給網站添加暗黑模式。感興趣的同學，請繼續往下閱讀。
暗黑模式是系統級别的
所謂的暗黑模式并不是現在才有的，這個事實已經存在很久了。如果你很早就接觸過電腦的話，你可能會發現你使用過的電腦螢幕經曆過好幾個過程，看起來會像下面這樣：
是不是覺得既熟悉又陌生。既然如此，為什麼今年會成為設計或者說Web端的一個熱點呢？
其實這一切都應該歸功于Apple公司，在macOS系統中提出了dark和light兩種視覺模式，即暗色（dark）和高亮（light）兩種皮膚，而且這兩種皮膚是系統級别的，我們可以通過系統上的切換，讓整個電腦上隻要支援dark/light模式的應用都可以輕易切換。
那麼為什麼要從系統級别去做這個事情呢？這是有原因的。系統面對的使用者群體中朋部分人士在身體上存有一定的缺陷，比如說色盲的使用者群體。也就是說，這種暗黑模式或者高亮模式對于有色盲的使用者群體是非常友好的。既然如此，為了讓自己的Web網站或者Web應用能向系統級别靠齊，就有了網站級别的暗黑模式。
你可能在很多網站的右上角看到了一個提供暗黑和高亮模式的切換按鈕。
暗黑模式實作原理
給Web網站或者Web應用添加暗黑模式的基本原理我想大家應該很清楚，事實上也非常的簡單。
正如上圖所示，給同一個Web網站或Web應用提供多套皮膚，使用者根據自己的喜歡進行選擇。那麼給網站添加暗黑模式是同一個原理，就是給網站同時提供兩套皮膚，即theme1.css和theme2.css。
早期我們可能會借助于JavaScript腳本，根據使用者的選擇在一個标簽上進行兩個主題檔案（即.css檔案）切換來實作：
<!-- HTML -->
<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />
// Script
document.getElementById('buttonID').addEventListener('click', function(){ document.getElementById('theme_css').href = '../theme2.css';
}) 這可能是一種比較古老的實作方案。也是大家最為熟悉的方案。
CSS實作暗黑模式切換
時至今日，給Web網站或Web應用程式實作暗黑模式已有多種模式。可以是純CSS的方式，也可以是CSS和JavaScript結合的模式。那麼接下來，我們來看看具體的實作方式。
媒體查詢prefers-color-scheme
CSS有一個特别強大的特性，那就是媒體查詢@media，CSS的@media規則可以用于有條件地将樣式應用于文檔以及其他各種上下文和語言，如HTML和JavaScript。在W3C的
Media Queries Level 5引入了“使用者首選媒體特性”，即Web網站或應用程式檢測使用者顯示内容的首先方式的方法。
比如prefers-reduced-motion這個媒體查詢就可以檢測頁面上的動畫，假設裝置開啟了“Reduce motion”選項，就可以通過該媒體查詢選項讓頁面上的元素是否具有動效：
如果使用者開啟減少動效的喜好，那麼就不要在元素上使用動效：
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
} 如果使用者沒有在系統級别設定該選項的話，可以像下面這樣讓按鈕有動效：
@media (prefers-reduced-motion: no-preference) {
button {
animation: vibrate 0.3s linear infinite both;
}
} Web上的其他具有動效的元素都可以像上面之樣使用， 上面隻是用button為例。
如果Web網站有很多元素具有動效的話，還可以将所有與動效相關的CSS放在一個獨立的檔案中，然後通過link的media屬性來加載：
<link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)" /> 為了說明JavaScript如何控制preferences-reduced-motion。這裡假設你在項目中使用了
Web Animation API。當使用者開啟了偏好設定，CSS規則會被浏覽器動态觸發，這樣一來我五一需要自己監聽變化，然後手動停止與動畫相關的東西：
const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
console.log(mediaQuery.media, mediaQuery.matches);
// ...
}); 如果你有強迫症，強迫減少網站上所有有動效停下來，還可以像下面這樣的簡單粗暴的操作：
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001s !important;
transition-duration: 0.001s !important;
}
} 有關于prefers-reduced-motion更詳細的介紹可以閱讀@Thomas Steiner的博文
《 Move Ya! Or maybe, don't, if the user prefers-reduced-motion!》。
似乎上面的内容偏離了我們今天要聊的主題，大家不用着急。隻不過是拿prefers-reduced-motion這個媒體查詢來抛磚引玉而以。在CSS中通過媒體查詢的prefers-color-scheme特性和prefers-reduced-motion類似，不同是，該特性是用于檢測使用者是否要求頁面使用light還是dark主題。該媒體查詢常見的值有：
- no-preference：表示使用者未指定作業系統主題。其作為 布爾值 時以false輸出
- light：表示使用者的作業系統是淺色主題（light）
- dark：表示使用者的作業系統是深色主題（dark）
也就是說，通過prefers-color-scheme媒體查詢要讓暗黑模式（dark）開啟深色系主題，可以像下面這樣使用：
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111416
--text-color: #ccc;
--link-color: #f96;
}
} 當然在非dark模式下，你的樣式可能像下面這樣：
:root {
--background-color: #fff;
--text-color: #333;
--link-color: #b52;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
} 注意上面提供的示例代碼僅僅是最基本的顔色配置方案，但也可以說完成了近90%的工作。但細節決定成敗。如果要讓你的Web網站或應用程式在light和dark模式切換下能有較好的效果，還需要注意其他的一些細節，比如說img、svg等元素的細節處理。有關于細節方面的，稍後我們會再讨論，暫且不表。
正如上面的示例所示，我們是通過CSS的媒體查詢特性來檢測dark模式，即通過檢查媒體查詢是否首選。那麼顔色方案是否比對還需要檢查目前浏覽器是否支援dark模式。
我們可以像下面這樣來檢測浏覽器是否支援dark模式：
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('浏覽器支援dark模式!(^_^)');
} 至于哪些浏覽已支援prefers-color-scheme特性，我們可以通過Caniuse來查詢：
前面的示例簡單的向大家示範了如何給Web網站或應用程式設定暗黑模式。但有很多細節我們需要去注意。
在一個應用中隻dark（暗色系）和light（亮色系）隻能是二選一，永遠不可能兩者共存。為什麼要提這個呢？我們從加載政策來做衡量。如果我們不管三七二十一，直接将所有樣式（普通樣式、亮色系樣式和暗色系樣式）都用一個.css檔案加載的話會強迫使用者在關鍵的渲染路徑中下載下傳CSS（包括你不想要的模式代碼也加載進來了）。為此，為了優化加載速度和給使用者提供更好的體驗，我們可以将CSS分成三個部分，以延遲非關鍵的CSS：
- style.css：網站上普通樣式（通用樣式）
- dark.css：暗色系所需樣式規則
- light.css：亮色系所需樣式規則
其中dark.css和light.css可以通過有條件的加載。加上并不是所有浏覽器都已支援prefers-color-scheme特性，是以我們在加載通用樣式style.css規則的基礎上動态預設加載light.css。即，不支援該特性的浏覽器會按下面的順序加載CSS：style.css ➜ light.css ➜ dark.css；如果支援該特性的浏覽器則會按下面的順序加載CSS：style.css ➜ dark.css ➜ light.css。具體的代碼如下：
<!-- Script -->
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
);
}
</script>
<!-- HTML -->
<link rel="stylesheet" href="/style.css">
<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)"> 按照該規則，前面的CSS示例代碼，我們就可以按下面這樣的檔案來劃分：
// dark.css
:root {
--background-color: #111416
--text-color: #ccc;
--link-color: #f96;
}
// light.css
:root {
--background-color: #fff;
--text-color: #333;
--link-color: #b52;
}
// style.css
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--link-color);
} 這裡使用了CSS自定義屬性，該示例再次向大家示範了CSS自定義屬性的強大之處。
CSS的新特性color-scheme
CSS Color Adjustment Module Level 1提供了另一個新屬性color-scheme。該特性會告訴浏覽器該應用的顔色主題和允許使用者代理的特殊變體樣式表，而且它還可以讓Web中的部分區域的渲染在dark和light之間切換，比如讓浏覽器渲染渲染的表單域是個黑色背景和高亮文本。
來看一個簡單的示例代碼：
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
} 同樣的，還可以HTML的meta标簽來設定：
<meta name="supported-color-schemes" content="light dark"> 到目前為止，
支援color-scheme的浏覽器還較少：
俗話說，百聞不如一見，這裡向大家展示一個由
@Thomas Steiner提供的案例：
上面這個案例和以往提供的案例有所不同。該案例按前面所講的分成三個獨立的樣式檔案：style.css、dark.css和light.css。嘗試切換暗黑模式并重新加載頁面，你會發現不比對的樣式檔案仍然會被加載，隻是優先級有所差異，這樣做它們就不會與站點目前所需的資源競争。
當網站是在light模式下，樣式檔案加載優先級是style.css ➜ light.css ➜ dark.css，即 dark.css權重最低（Lowest）：
當網站在dark模式下，樣式檔案加載優先級是style.css ➜ dark.css ➜ light.css，即 light.css權重最低（Lowest）：
當浏覽器不支援prefers-color-scheme而且設定light為預設模式，那麼樣式加載優先級會和高亮模式一樣：
特别聲明，上面三圖截圖來自于
《Hello darkness, my old friend》一文。
上面示例還做了另一個細節上的優化。和其他媒體查詢更改一樣，可以通過JavaScript的訂閱來更改暗黑模式。比如可以動态更改頁面的favicon或更改來決定Chrome中URL欄的顔色。代碼并不複雜：
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
console.log(`Dark mode is ${darkModeOn ? 'on' : 'off'}.`);
}); CSS混合模式來助攻
上面我們看到的都是原生CSS處理暗黑模式的技術方案。事實上我們還可以通過CSS Hack來實作，采用CSS的filter和CSS的混合模式mix-blend-mode。
下面這個示例就是CSSfilter實作的暗黑模式：
Switch from light to dark mode using the toggle [CSS filter]@airenCodePen
關鍵代碼很少：
.theme-dark {
filter: invert(100) hue-rotate(180deg);
}
.theme-dark img {
filter: invert(100) hue-rotate(180deg);
} 另外還可以使用CSS的mix-blend-mode來實作：
.dark-mode-screen {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: white;
mix-blend
 如果你想讓頁面中部分元素忽略mix-blend-mode:difference帶來的影響，可以使用isolation: isolate：
.twitter-logo,
.emoji {
isolation: isolate;
} 效果會類似下圖這樣：
有關于這方面的詳細介紹可以閱讀@thoughtspile的
《How to create a dark theme without breaking things: learning with the Yandex Mail team》和的@wgao19
《Night Mode with Mix Blend Mode: Difference》。其他細節
根據前面的内容去操作，不管是使用CSS的媒體查詢prefers-color-scheme、新特性color-scheme還是借助CSS的濾鏡filter或混合模式mix-blend-mode都可以輕易的給Web網站或應用程式添加暗黑模式。
注意，很多同學有一個小誤區，認為filter和mix-blend-mode隻能用于圖檔，事實上并非如此，他可以運用于Web的各種元素上。
那麼掌握了實作暗黑模式的技術方案就能做出好的效果嗎？并非如此，其中還是有很多細節需要我們注意。比如顔色的配置、Web媒體（圖檔、Icon等）和可通路性等方面的處理都值得我們去推敲。
顔色的配置
在給Web網站或Web應用設計暗黑模式的時候，你千萬不要鑽到死胡同裡。暗黒模式并不僅僅是黑（black）與白（white）之間的切換。你想像一下，在一個深夜密不透光的地方，用你的肉眼注視着一塊高亮的螢幕，時間久了，你會有什麼樣的一個感覺：
正确的做法是應該為你的品牌色系提供一個暗色系版本，如果不奏效的話，可以根據需要在黑色和灰色之間選擇一個平均顔色。比如說，Web的背景顔色是black(#000)（或者接近#000）的話，建議你前景色（比如文本顔色）取值為rgb(250, 250, 250)（或者靠近這個顔色值）。這樣才能讓你的整體效果不至于亮瞎使用者的眼睛。比如下面這樣的一個效果：
如果你實在拿不準配色是否合理（Web安全顔色），你可以借助線上工具，比如
Contrast Checker: 該工具是根據
WCAG 2.0 guidelines for contrast accessibility标準來做的。比如下面圖所展示的效果就是一個較好的效果：
除了借助工具來檢測之外，浏覽器的插件也是把利器，可以借助浏覽器有關于Accessibility相關的插件來做檢測，就比如小站，檢測出來的結果令人汗顔：
事實上，很多網站都存在這樣的缺陷：
圖檔處理
在暗黑模式下，圖檔的處理也是非常重要的。它們可能會直接影響使用者的體驗，太亮的圖像可能會讓使用者感到困惑和不舒服。而且有人做過這方面相應的調查，大多數被調查的人在暗黑模式下更喜歡亮度低的圖像。比如下面這張圖：
左側是暗黑模式下效果，右側是在高亮模式下效果。
為了能更使用者更好的體驗，這裡提倡在不同模式下給使用者展示不同效果的圖像，但并非說在不同的模式下引入不同的圖檔。就目前CSS的技術，我們在同一圖像源下可以很好的對圖像做處理。比如，粗暴一點的使用CSS的opacity，溫柔一點的使用CSS的混合模式mix-blend-mode（如果是背景的話則用background-blend-mode）或 filter。
// 粗暴模式
@media (prefers-color-scheme: dark) {
img {
opacity: 0.65;
}
img:hover {
opacity: 1;
}
}
// 溫柔模式
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
} 不過這裡有一個細節需要注意，我們引入的圖像源有可能是.svg的矢量圖，如果希望給矢量圖（更多是Icon）一個不同于位圖（更多是圖像，照片）的重新着色處理。那麼我們可以通過屬性選擇器和僞類選擇器将.svg過濾掉：
@media (prefers-color-scheme: dark) {
img:not([src*=".svg"]) {
filter: brightness(.8) contrast(1.2);
}
} 如果你希望給使用者更多的選擇的話，我們可以将CSS自定義屬性和JavaScript結合起來，可以讓使用者根據自己的喜好去做調節。這裡還是拿圖檔的處理為例吧：
// dark.css
:root {
--brightness: brightness(.8);
--contrast: contrast(1.2);
--image-filter: var(--brightness) var(--contrast);
}
// JS
document.documentElement.style.setProperty('--image-filter', value); 也可以參考下面這個Demo，使用filter修改圖檔效果：
CSS Filters@nitnelavCodePen
當然，如果你是位追求極緻的同學，希望在暗黑模下給使用者提供最好的圖像，而不是随便修改圖檔的亮度或飽和度；但又不希望因加載圖檔資源過多而影響整體的性能（甚至不希望因為自己的原因過渡浪費流量）。如果真的是這樣的話，你可以由設計師為暗黑模式下提供特定的圖檔，然後與元素一起使用。可以在的根據媒體屬性的設定加載所需要的圖檔資源：
<picture>
<source media="prefers-color-scheme: dark" srcset="./dark.webp" />
<source media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" srcset="./light.webp" />
<img src="./light.png" alt="map" />
</picture> 暗黑模式下會加載dark.webp圖檔，在高亮模式或者不支援prefers-color-scheme的浏覽器中會加載light.webp圖檔，不支援的浏覽器會加載light.png圖檔。你将看到的效果可能如下：
圖示的處理
剛才提到過，很有可能你Web網站或Web應用程式中有很多Icon圖示用的是SVG圖示。在暗黑模式下，同樣要對Icon圖示做相應的處理。這裡來看兩種情景。
先來看第一種，那就是.svg檔案和其他格式的圖像一相通過标簽引入。由于該Icon很有可能是純色的，是以在暗黑模式下，我們可以通過filter來做dark/light之間的切換：
/* dark.css */
:root {
--icon-filter: invert(100%);
--icon-filter_hover: invert(40%);
}
img[src*=".svg"] {
filter: var(--icon-filter);
}
/* light.css */
:root {
--icon-filter_hover: invert(60%);
}
/* style.css */
img[src*=".svg"]:hover {
filter: var(--icon-filter_hover);
} 如果你還想調整成其他的顔色，還可以像下面這個Demo來操作，
增加filter的屬性值選項 Change Icon Color with CSS Filter (Forked @ Cassie Evans)@airenCodePen該方法和處理圖像的方法是類似的。接下來我們再來看第二種方式。使用的Icon圖示很有可能是内聯的SVG，針對這樣的場景，我們可以使用CSS的currentColor屬性。currentColor最大的特性就是可以根據color的值來決定元素的顔色，而對于SVG繪制的Icon圖示，主要由path、circle、rect這樣的元素構成，這些元素可以通過fill、stroke來決定填充色和描邊色。換句話說，我們在使用内聯SVG時，将SVG中用到fill和stroke的屬性值都強制設定成currentColor，就像下面這樣：
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"/>
<circle cx="12" cy="12" r="4"/>
<line x1="21.17" y1="8" x2="12" y2="8"/>
<line x1="3.95" y1="6.06" x2="8.54" y2="14"/>
<line x1="10.88" y1="21.94" x2="15.46" y2="14"/>
</svg> 另外在媒體查詢中設定：
@media (prefers-color-scheme: dark) {
:root {
--background-color: #111416
--text-color: #ccc;
--link-color: #f96;
}
svg {
color: var(--text-color)
}
} 如果你分成多個檔案的話，可能會像下面這樣的：
/* dark.css */
:root {
--color: rgb(250, 250, 250);
--background-color: rgb(5, 5, 5);
--link-color: rgb(0, 188, 212);
--main-headline-color: rgb(233, 30, 99);
--accent-background-color: rgb(0, 188, 212);
--accent-color: rgb(5, 5, 5);
}
/* light.css */
:root {
--color: rgb(5, 5, 5);
--background-color: rgb(250, 250, 250);
--link-color: rgb(0, 0, 238);
--main-headline-color: rgb(0, 0, 192);
--accent-background-color: rgb(0, 0, 238);
--accent-color: rgb(250, 250, 250);
}
/* style.css */
:root {
color-scheme: light dark;
}
body {
color: var(--color);
background-color: var(--background-color);
}
svg {
color: var(--color);
} 讓切換有一個過渡效果
熟悉CSS的同學都應該記得，CSS的transition可以讓元素在兩個狀态的切換過程中有一個平滑過渡的效果，以至于不會那麼生硬：
而我們聊的dark/light兩模式之間的切換剛好穩合transition。加上dark/light兩模式之間的切換就是color和background-color屬性值的切換。為了讓整個切換過程有一個過渡效果，我們可以把transition加上來。比如：
body {
--duration: 0.5s;
--timing: ease;
color: var(--color);
background-color: var(--background-color);
transition: color var(--duration) var(--timing), background-color var(--duration) var(--timing);
} JavaScript實作dark/light模式切換
如果你不依任CSS，或者說希望讓自己的Web網站或Web應用程式都具備dark/light模式的切換，那麼可以通過JavaScript來實作。因為dark/light模式的切換說到底就是兩套主題的切換。當然，你可以讓該JS的能力更為強大一些，不僅僅是對.css檔案的切換，粗暴簡單的實作網站換膚這樣的一個功能。或許你可以這樣做：
- 在網站上提供相應的切換按鈕（比如一個tab頁籤，也可以是一個radio按鈕），友善使用者自行選擇
- 該JS可以對系統級别做監聽，如果使用者從系統級别開啟了暗黑模式，那麼就把樣式檔案切換到dark.css下
- 還可以根據時間來做一個dark/light模式的切換，比如說白天采用light模式，晚上使用dark模式
- 和CSS實作dark/light模式切換一樣，還可以在JS中加上transition效果，讓模式在切換的過程有一個過渡效果
為了節約篇幅，這裡就不把JavaScript代碼貼出來了，感興趣的話可以看看@Koos Looijesteijn的
《 A guide to implementing dark modes on websites》一文。文章中詳細的根據上面幾個過程，向大家展示了對應的JavaScript代碼。如果你不願閱讀文章的話，可以點選這裡直接
閱讀源代碼不過就我個人而言，我不太推薦使用JavaScript方案，這可能和我自己的信條有關系：
在Web端能用CSS實作的絕不借助JavaScript。
浏覽器配置
下面有一個簡單的示例：
Switch light / dark mode with prefers-color-scheme: dark@airenCodePen在該示例的頁面上沒有提供任何切換按鈕給使用者做選擇。主要目的是希望頁面能根據系統級别的設定來決定采用什麼主題。假設你的系統預設就開啟了暗黑模式。但你在浏覽器看到的效果也不一定是dark模式下的效果。這主要是因為浏覽器對prefers-color-scheme支援有一定的差異。不過我們可以對浏覽器做一些設定，讓頁面能正常的跟着系統設定做出正确的渲染。
如果你使用Firefox，可以在位址欄中輸入about:config，然後滑鼠右鍵點選選擇“建立（New）” → “整數（Integer）”，建立整數ui.systemUsesDarkTheme，并且将其值設定為1：
如果你使用的是Safari浏覽器，可以使用它自帶的工具來檢視效果：
最終在支援的浏覽器下看到的效果如下：
除此之外，還可以給浏覽器安裝插件。比如@CHRIS HOFFMAN在他的
《 How to Enable Dark Mode for Google Chrome》文章中就詳細的介紹了怎麼在Chrome浏覽器安裝
Dark Reader插件，讓Web頁面具有暗黑模式浏覽效果：
小結
上面我們通過不同的方式向大家闡述和示範了如何實作黑暗模式和高亮模式切換的解決方案。有粗暴簡單的方式，原始的切換樣式表的方式，還有采用一些新的CSS特性，比如CSS自定義屬性，新的媒體查詢特性，還有神奇的濾鏡和混合模式。而且這些解決方案中既有CSS和JavaScript的混合解決方案，也有純CSS的解決方案，甚至還有原生系統和浏覽器通信的解決方案。還是那句老話，不管哪種解決方案或者技術手段，都有自己的利弊，沒有最好，隻有最适合的使用場景。在實際使用的時候，應該具體問題具體分析。
擴充閱讀
如果你想更深入了解這方面的知識，建議你花一些時間閱讀下面相關的教程：
- Hello darkness, my old friend
- Implementing Dark Mode For My Website
- Dark mode
- A guide to implementing dark modes on websites
- How to Enable Dark Mode for Google Chrome
- Dark Mode in CSS
- Night Mode with Mix Blend Mode: Difference
- CSS-only dark mode
- Designing for Dark Mode
- Supporting macOS Mojave’s Dark Mode on the web
- Create A Dark/Light Mode Switch with CSS Variables
- Firefox 67: Dark Mode CSS, WebRender, and more
給網站添加暗黑模式指南暗黑模式是系統級别的暗黑模式實作原理CSS實作暗黑模式切換JavaScript實作dark/light模式切換小結
更多技術幹貨，關注「淘系技術」微信公衆号