本文由 Mads Stoumann 撰寫的博文，主要介紹了如何通過簡單的三行css代碼實現(xiàn)網站的暗黑模式。該博文提到，<system-color>關鍵字一般反映用戶、瀏覽器或操作系統(tǒng)做出的默認顏色選擇。這些關鍵字通常用于瀏覽器的默認樣式表。通過這種方式，我們可以輕松地實現(xiàn)網站的暗黑模式。
在另一篇博文中，Mads Stoumann詳細介紹了如何使用SVG和CSS重新創(chuàng)建Apple的暗黑模式圖標。這證明了他在此領域的深厚技術和創(chuàng)新能力。
總的來說，這個網站提供了許多關于使用CSS和SVG進行網站設計和開發(fā)的有用信息，特別是關于暗黑模式的實現(xiàn)。這對那些希望在自己的網站上實現(xiàn)暗黑模式的開發(fā)者來說是非常有價值的資源。
下面是正文~~
深色模式是一種設計趨勢，網站的配色方案被更改為深色背景，配以淺色文字和元素。它也被稱為夜間模式或黑暗主題。深色模式的目的是減少低光環(huán)境下的眼睛疲勞，節(jié)省移動設備的電池壽命，并創(chuàng)造一個時尚現(xiàn)代的美感。
許多熱門網站和應用程序現(xiàn)在都提供了黑暗模式選項 —— 如 TailwindCSS：
如果您是開發(fā)者，您很可能已經知道如何在開發(fā)者工具中切換暗黑模式：
如果你想要為操作系統(tǒng)（以及所有支持暗黑模式的應用程序）切換暗黑模式，請轉到系統(tǒng)設置。在mac上，可以在系統(tǒng)設置>外觀下找到它：
使用系統(tǒng)顏色的深色模式
首先，我們將創(chuàng)建一個帶有標題的簡單html：
<body>
<h1>Hello Darkness, My Old Friend</h1>
</body>
在樣式表中，添加:
body {
color-scheme: light dark;
}
這會告訴瀏覽器，document 可以接受亮色和暗色的 color-scheme 。
當前如果現(xiàn)在指定為 dark 瀏覽器也不會變成黑色。
這是因為 user-agent 樣式表沒有設置任何默認顏色。我們可以通過使用系統(tǒng)顏色快速解決這個問題：
body {
background-color: Canvas;
color: CanvasText;
color-scheme: light dark;
}
僅用3行CSS代碼就能為我們的整個網站實現(xiàn)暗黑模式！
下面，我們更深入地了解系統(tǒng)顏色，來自規(guī)范：
一般來說，<system-color>關鍵字反映了用戶、瀏覽器或操作系統(tǒng)做出的默認顏色選擇。由于這個原因，它們通常在瀏覽器默認樣式表中使用。
這是一個淺色模式演示，在Safari中展示了可用的系統(tǒng)顏色：
如果我們切換到深色模式，某些顏色會完全改變（就像我們已經遇到的 Canvas 和 CanvasText ），而其他顏色只會稍微改變：
使用系統(tǒng)顏色進行黑暗模式是一種簡化的黑暗模式體驗。是的，它會起作用 — 但是純黑白有點無聊
我們可以在CSS中使用 color-mix 來增加趣味性 將 CanvasText （黑色或白色）混入 Canvas （白色或黑色）以獲得 background-color ，反之亦然，用于 color ：
body {
background-color: color-mix(in srgb, Canvas, CanvasText 2.5%);
color: color-mix(in srgb, CanvasText, Canvas 15%);
}
這樣看起來會更柔和:
從顏色中減去飽和度，是在深色模式中制作顏色變化的一種廣泛使用的方法。
在CSS中使用相對顏色，我們可以做到這一點：
background: hsl(from ActiveText h calc(s - 30%) l);
不幸的是，相對顏色在任何瀏覽器中都不能與系統(tǒng)顏色一起工作。
注意：系統(tǒng)顏色可以被強制顏色覆蓋（盡管很少使用）——所以不要過分依賴這種技術。
我們繼續(xù)學習另一種技巧，這將使我們能夠精細控制我們的暗黑模式顏色。
使用 prefers-color-scheme 媒體查詢
要為亮色和暗色模式指定特定顏色，我建議使用 CSS 自定義屬性，然后使用 prefers-color-scheme 媒體查詢更新這些屬性。
以淺色模式為默認，我們將顏色添加到 :where(body) -部分，將它們與我們的常規(guī) body -樣式分開：
/* Properties */
:where(body) {
--background-color: #FFF;
--text-color: #222;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
然后，對于暗黑模式，我們將簡單地更新這些顏色屬性：
@media (prefers-color-scheme: dark) {
:where(body) {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
但是，如果我們希望用戶根據自己的需求選擇我們網站的版本，而不是根據系統(tǒng)設置呢？
他們可能更喜歡將系統(tǒng)設置為深色模式，但我們的網站是淺色模式。讓我們創(chuàng)建一個切換器！如果您訪問像 TailwindCSS 這樣的網站，您會注意到當您從 color-scheme-toggler 中選擇“dark”時，會在 html -節(jié)點上添加一個 dark -類。這是通過 JAVAScript 完成的：
創(chuàng)建顏色方案切換器
如果你用過 TailwindCSS ，你會注意到當你從 color-scheme-toggler 中選擇“dark”時，會在 html -節(jié)點上添加一個 dark -類。這是通過 JavaScript 完成的：
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
Open Props 正在使用類似的方法，但是更新 data-theme 屬性，然后在兩個塊中定義屬性：
[data-theme=light] {
--nav-icon: var(--gray-7); /* etc */
}
[data-theme=dark] {
--nav-icon: var(--gray-5); /* etc */
}
使用 CSS
使用一些全新的CSS技術，我們可以在不使用JavaScript的情況下創(chuàng)建一個切換器。我們將創(chuàng)建一個具有3種狀態(tài)的切換器：
- Light (forced)
- Auto (system default, could be either light or dark)
- Dark (forced)
首先，一些基本標記：
<fieldset>
<label>
<input type="radio" name="color-scheme" id="color-scheme-light" value="0">
Light
</label>
<label>
<input type="radio" name="color-scheme" value="auto" checked>
Auto
</label>
<label>
<input type="radio" name="color-scheme" id="color-scheme-dark" value="1">
Dark
</label>
</fieldset>
在添加了一些基本樣式后（請參閱下面的Codepen演示），它的呈現(xiàn)效果如下：
我們將在html元素中添加一個 --darkmode -屬性和 container-type ：
html {
--darkmode: 0;
container-name: root;
container-type: normal;
}
我們使用 @container style() -查詢，因此我們需要將節(jié)點設置為“container”。
既然我們不想觀察到 inline-size 變化，我們只需添加值 normal 。
如果用戶選擇了一個“強制”值，我們將更新 --darkmode :
html:has(#color-scheme-light:checked) { --darkmode: 0; }
html:has(#color-scheme-dark:checked) { --darkmode: 1; }
最后，我們將使用容器 style() -查詢來檢查，如果 --darkmode 設置為 1 :
@container root style(--darkmode: 1) {
body {
--background-color: hsl(228, 5%, 15%);
--text-color: hsl(228, 5%, 80%);
}
}
注意：@container style() -queries 目前僅在 Chrome 中的 behind-a-flag 下工作，這還是初期階段，所以不要在生產環(huán)境中使用。
現(xiàn)在，在選擇“Dark”之后，我們的切換器（和頁面）看起來是這樣的：
存儲狀態(tài)
如果我們想要存儲用戶的選擇，就需要一點JavaScript！
首先，為 <fieldset> 添加一個標識符：
<fieldset id="colorScheme">
接下來，在JavaScript中：
const colorScheme = document.getElementById('colorScheme')
colorScheme.addEventListener('change', event => {
localStorage.setItem('color-scheme', event.target.value)
})
現(xiàn)在，我們只需要在文檔加載后將屬性設置為 localStorage -值：
window.addEventListener("load", event => {
const scheme = localStorage.getItem('color-scheme') || 'auto'
if (scheme) {
document.documentElement.style.setProperty('--darkmode', scheme)
}
})
要在切換器中選擇正確的模式，請將此添加到 if -塊：
const selected = [...colorScheme.elements].filter(element => element.value === scheme)
if (selected) selected[0].checked = true;
Toggler
事例：https://codepen.io/stoumann/pen/KKGNbQr
System Colors
https://codepen.io/stoumann/pen/GRYNPzy。
