一行 CSS 為網(wǎng)頁添加暗黑模式支持

翻譯自：https://dev.to/akhilarjun/one-line-dark-mode-using-css-24li

本文將介紹一種簡單易懂的方法實現(xiàn)網(wǎng)站暗黑模式

話不多說，我們開始吧！?

以下面新聞應用程序為例?：

現(xiàn)在僅需增加以下一行魔法 CSS：

html[theme='dark-mode']?{
????filter:?invert(1)?hue-rotate(180deg);
}

添加完成后頁面展示效果：

哇偶！瞬間轉(zhuǎn)換成暗黑模式有沒有??

解析

filter CSS 屬性將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調(diào)整圖像，背景和邊框的渲染。（參考：MDN Web文檔）

對于暗黑模式，將使用兩個 filter ：invert 和 hue-rotate

invert：反轉(zhuǎn)配色。黑色變?yōu)榘咨?，白色變?yōu)楹谏?，所有顏色都是如?/p>

hue-rotate：幫助我們處理所有其他非黑色和白色的顏色。將色相旋轉(zhuǎn)180度，我們確保應用程序的顏色主題不會改變，而只是減弱其顏色。

這個方法的唯一缺點是，它還會反轉(zhuǎn)應用程序中的所有圖像。

因此，我們將對所有圖像添加相同的規(guī)則，以逆轉(zhuǎn)效果。

html[theme='dark-mode']?img{
????filter:?invert(1)?hue-rotate(180deg);
}

我們還將向HTML元素添加一個 transition ，以確保過渡不會過于花哨!

html?{
????transition:?color?300ms,?background-color?300ms;
}

實現(xiàn)結(jié)果?：