一步到位：三行CSS代碼輕松實現全網站暗黑模式
本文由 Mads Stoumann 撰寫的博文，主要介紹了如何通過簡單的三行CSS代碼實現網站的暗黑模式。該博文提到，<system-color>關鍵字一般反映用戶、瀏覽器或操作系統做出的默認顏色選擇。這些關鍵字通常用于瀏覽器的默認樣式表。通過這種方式，我們可以輕松地實現網站的暗黑模式。
在另一篇博文中，Mads Stoumann詳細介紹了如何使用SVG和CSS重新創建Apple的暗黑模式圖標。這證明了他在此領域的深厚技術和創新能力。
總的來說，這個網站提供了許多關于使用CSS和SVG進行網站設計和開發的有用信息，特別是關于暗黑模式的實現。這對那些希望在自己的網站上實現暗黑模式的開發者來說是非常有價值的資源。
下面是正文~~
深色模式是一種設計趨勢，網站的配色方案被更改為深色背景，配以淺色文字和元素。它也被稱為夜間模式或黑暗主題。深色模式的目的是減少低光環境下的眼睛疲勞，節省移動設備的電池壽命，并創造一個時尚現代的美感。
許多熱門網站和應用程序現在都提供了黑暗模式選項 —— 如 TailwindCSS：
如果您是開發者，您很可能已經知道如何在開發者工具中切換暗黑模式：
如果你想要為操作系統（以及所有支持暗黑模式的應用程序）切換暗黑模式，請轉到系統設置。在Mac上，可以在系統設置>外觀下找到它：
使用系統顏色的深色模式
首先，我們將創建一個帶有標題的簡單HTML：
<body>
<h1>Hello Darkness, My Old Friend</h1>
</body>在樣式表中，添加:
body {
color-scheme: light dark;
}這會告訴瀏覽器，document 可以接受亮色和暗色的 color-scheme 。
當前如果現在指定為 dark 瀏覽器也不會變成黑色。
這是因為 user-agent 樣式表沒有設置任何默認顏色。我們可以通過使用系統顏色快速解決這個問題：
body {
background-color: Canvas;
color: CanvasText;
color-scheme: light dark;
}
僅用3行CSS代碼就能為我們的整個網站實現暗黑模式！
下面，我們更深入地了解系統顏色，來自規范：
一般來說，<system-color>關鍵字反映了用戶、瀏覽器或操作系統做出的默認顏色選擇。由于這個原因，它們通常在瀏覽器默認樣式表中使用。
這是一個淺色模式演示，在Safari中展示了可用的系統顏色：
如果我們切換到深色模式，某些顏色會完全改變（就像我們已經遇到的 Canvas 和 CanvasText ），而其他顏色只會稍微改變：
使用系統顏色進行黑暗模式是一種簡化的黑暗模式體驗。是的，它會起作用 — 但是純黑白有點無聊
我們可以在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);不幸的是，相對顏色在任何瀏覽器中都不能與系統顏色一起工作。
注意：系統顏色可以被強制顏色覆蓋（盡管很少使用）——所以不要過分依賴這種技術。
我們繼續學習另一種技巧，這將使我們能夠精細控制我們的暗黑模式顏色。
使用 prefers-color-scheme 媒體查詢
要為亮色和暗色模式指定特定顏色，我建議使用 CSS 自定義屬性，然后使用 prefers-color-scheme 媒體查詢更新這些屬性。
以淺色模式為默認，我們將顏色添加到 :where(body) -部分，將它們與我們的常規 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%);
}
}
但是，如果我們希望用戶根據自己的需求選擇我們網站的版本，而不是根據系統設置呢？
他們可能更喜歡將系統設置為深色模式，但我們的網站是淺色模式。讓我們創建一個切換器！如果您訪問像 TailwindCSS 這樣的網站，您會注意到當您從 color-scheme-toggler 中選擇“dark”時，會在 html -節點上添加一個 dark -類。這是通過 JavaScript 完成的：
創建顏色方案切換器
如果你用過 TailwindCSS ，你會注意到當你從 color-scheme-toggler 中選擇“dark”時，會在 html -節點上添加一個 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的情況下創建一個切換器。我們將創建一個具有3種狀態的切換器：
- 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演示），它的呈現效果如下：
我們將在html元素中添加一個 --darkmode -屬性和 container-type ：
html {
--darkmode: 0;
container-name: root;
container-type: normal;
}我們使用 @container style() -查詢，因此我們需要將節點設置為“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 下工作，這還是初期階段，所以不要在生產環境中使用。
現在，在選擇“Dark”之后，我們的切換器（和頁面）看起來是這樣的：
存儲狀態
如果我們想要存儲用戶的選擇，就需要一點JavaScript！
首先，為 <fieldset> 添加一個標識符：
<fieldset id="colorScheme">接下來，在JavaScript中：
const colorScheme = document.getElementById('colorScheme')
colorScheme.addEventListener('change', event => {
localStorage.setItem('color-scheme', event.target.value)
})現在，我們只需要在文檔加載后將屬性設置為 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。
