一行 CSS 代碼實現暗黑模式，從未如此簡單

作者：story 2025-08-28 06:15:00

有一種方法，只需要一行 CSS，就能給任何網站瞬間加上一個“看起來還不錯”的暗黑模式。

我們都知道實現一個完善的暗黑模式主題通常需要維護兩套顏色變量，并用 JavaScript 進行切換，工作量不算小。

但有一種方法，只需要一行 CSS，就能給任何網站瞬間加上一個“看起來還不錯”的暗黑模式呢？

把下面這行代碼添加到你的 CSS 文件中，或者直接在瀏覽器的開發者工具里注入到 <html> 標簽上試試看：

html {
  filter: invert(1) hue-rotate(180deg);
}

就是這樣。整個整個網頁，瞬間就進入了暗黑模式。

是不是非常簡單？白色背景變成了黑色，黑色文字變成了白色，甚至連網站的主題色也得到了一個相對和諧的轉換。

這行代碼的核心是 CSS 的 filter 屬性，它就像給整個網頁上了一層“濾鏡”。我們這里用了兩個濾鏡函數：invert() 和 hue-rotate()。

invert() 函數會反轉元素的所有顏色。invert(1) 表示 100% 完全反轉。

這解釋了為什么背景和文字能完美切換，但問題也來了：所有的顏色都被反轉了，這會讓網站的主題色（比如藍色鏈接）變得非常奇怪和刺眼（比如亮黃色）。這顯然不是我們想要的效果。

這就是第二個函數 hue-rotate() 登場的原因。它負責修正 invert() 帶來的色彩失真問題。

hue-rotate(180deg) 會將所有顏色在色相環上旋轉 180 度。

當一個顏色先被 invert(1) 反轉，再被 hue-rotate(180deg) 旋轉后，它會變回一個與其原始色調非常接近，但明暗度不同的顏色。

舉個例子：

通過這個巧妙的組合，我們不僅反轉了黑白，還把其他顏色“撥亂反正”，讓它們保持在原有的色系里，從而得到一個視覺上更和諧的暗黑主題。

這個方法雖然強大，但并非完美。你會很快發現一個問題：網頁上的圖片、視頻和 <iframe> 也被反轉了！這就導致圖片看起來非常奇怪。

別擔心，我們同樣有簡單的修復方法，既然問題是它們被反轉了，那我們再把它們反轉一次，不就變回來了嗎？

為那些不需要應用濾鏡的元素，再應用一次同樣的濾鏡即可：

通過這個“反反得正”的操作，我們豁免了特定的媒體元素，讓它們在暗黑模式下正常顯示。

這個一行 CSS 的方法，更像是一個聰明絕頂的“Hack”，而不是一個生產環境下的“最佳實踐”。

它最適合用于：

對于需要精細打磨、注重品牌視覺和用戶體驗的項目，仍推薦使用 CSS 自定義屬性結合 prefers-color-scheme 媒體查詢來實現一個可控、高質量的暗黑模式。

責任編輯：趙寧寧來源： JavaScript