一行 CSS 代碼實(shí)現(xiàn)暗黑模式，從未如此簡單
我們都知道實(shí)現(xiàn)一個(gè)完善的暗黑模式主題通常需要維護(hù)兩套顏色變量，并用 JavaScript 進(jìn)行切換，工作量不算小。
但有一種方法，只需要一行 CSS，就能給任何網(wǎng)站瞬間加上一個(gè)“看起來還不錯(cuò)”的暗黑模式呢？
一、一行 CSS 代碼
把下面這行代碼添加到你的 CSS 文件中，或者直接在瀏覽器的開發(fā)者工具里注入到 <html> 標(biāo)簽上試試看：
html {
filter: invert(1) hue-rotate(180deg);
}就是這樣。整個(gè)整個(gè)網(wǎng)頁，瞬間就進(jìn)入了暗黑模式。
是不是非常簡單？白色背景變成了黑色，黑色文字變成了白色，甚至連網(wǎng)站的主題色也得到了一個(gè)相對和諧的轉(zhuǎn)換。
二、filter 屬性的威力
這行代碼的核心是 CSS 的 filter 屬性，它就像給整個(gè)網(wǎng)頁上了一層“濾鏡”。我們這里用了兩個(gè)濾鏡函數(shù)：invert() 和 hue-rotate()。
1. invert(1)：顏色反轉(zhuǎn)
invert() 函數(shù)會反轉(zhuǎn)元素的所有顏色。invert(1) 表示 100% 完全反轉(zhuǎn)。
- 白色 (#FFFFFF) 變成了黑色 (#000000)。
- 黑色 (#000000) 變成了白色 (#FFFFFF)。
- 藍(lán)色 (#0000FF) 變成了它的反色——黃色 (#FFFF00)。
這解釋了為什么背景和文字能完美切換，但問題也來了：所有的顏色都被反轉(zhuǎn)了，這會讓網(wǎng)站的主題色（比如藍(lán)色鏈接）變得非常奇怪和刺眼（比如亮黃色）。這顯然不是我們想要的效果。
2. hue-rotate(180deg)：色相旋轉(zhuǎn)
這就是第二個(gè)函數(shù) hue-rotate() 登場的原因。它負(fù)責(zé)修正 invert() 帶來的色彩失真問題。
hue-rotate(180deg) 會將所有顏色在色相環(huán)上旋轉(zhuǎn) 180 度。
當(dāng)一個(gè)顏色先被 invert(1) 反轉(zhuǎn)，再被 hue-rotate(180deg) 旋轉(zhuǎn)后，它會變回一個(gè)與其原始色調(diào)非常接近，但明暗度不同的顏色。
舉個(gè)例子：
- 藍(lán)色 被 invert(1) 變成了 黃色。
- 黃色 再經(jīng)過 hue-rotate(180deg) 旋轉(zhuǎn)，又變回了 藍(lán)色系 的一個(gè)顏色（通常是更深或更淺的藍(lán)色）。
通過這個(gè)巧妙的組合，我們不僅反轉(zhuǎn)了黑白，還把其他顏色“撥亂反正”，讓它們保持在原有的色系里，從而得到一個(gè)視覺上更和諧的暗黑主題。
三、副作用與修復(fù)
這個(gè)方法雖然強(qiáng)大，但并非完美。你會很快發(fā)現(xiàn)一個(gè)問題：網(wǎng)頁上的圖片、視頻和 <iframe> 也被反轉(zhuǎn)了！這就導(dǎo)致圖片看起來非常奇怪。
別擔(dān)心，我們同樣有簡單的修復(fù)方法，既然問題是它們被反轉(zhuǎn)了，那我們再把它們反轉(zhuǎn)一次，不就變回來了嗎？
為那些不需要應(yīng)用濾鏡的元素，再應(yīng)用一次同樣的濾鏡即可：
通過這個(gè)“反反得正”的操作，我們豁免了特定的媒體元素，讓它們在暗黑模式下正常顯示。
這個(gè)一行 CSS 的方法，更像是一個(gè)聰明絕頂?shù)摹癏ack”，而不是一個(gè)生產(chǎn)環(huán)境下的“最佳實(shí)踐”。
它最適合用于：
- 個(gè)人項(xiàng)目、文檔網(wǎng)站、博客等對視覺要求不那么嚴(yán)苛的場景
- 快速為現(xiàn)有項(xiàng)目添加一個(gè)“可用”的暗黑模式選項(xiàng)
- 通過瀏覽器插件，為任何你常逛的網(wǎng)站強(qiáng)制開啟暗黑模式
對于需要精細(xì)打磨、注重品牌視覺和用戶體驗(yàn)的項(xiàng)目，仍推薦使用 CSS 自定義屬性結(jié)合 prefers-color-scheme 媒體查詢來實(shí)現(xiàn)一個(gè)可控、高質(zhì)量的暗黑模式。
