一行代碼使用CSS的黑暗模式

這是一個絕對不費吹灰之力的方法，將已經開發好的網站轉換爲支持黑暗模式。

話很少說，咱們開始吧! 👾

以這個新聞應用爲例

如今添加魔術CSS

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

瞧！你完成了 ✌

實現黑暗模式

說明

如今，讓咱們試着理解下面發生了什麼。

CSS filter 屬性將模糊或顏色轉移等圖形效果應用到元素上。濾鏡一般用於調整圖像、背景和邊框的渲染。

對於這種黑暗模式，咱們將使用兩個濾鏡，即 invert 和 hue-rotate

invert濾鏡能夠幫助反轉應用程序的顏色方案，所以，黑色變成了白色，白色變成了黑色，全部顏色也是如此。所以，黑變白，白變黑，全部顏色也是如此。

hue-rotate濾鏡能夠幫助咱們處理全部其餘非黑白的顏色。將色調旋轉180度，咱們確保應用程序的顏色主題不會改變，而只是減弱它的顏色。

這個方法惟一的問題是，它也會反轉你應用程序中的全部圖像。所以，咱們將對全部圖像添加相同的規則來反轉效果。

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

並且咱們還會給HTML元素添加一個過渡，確保過渡不會變得華而不實！

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

結果

---

來源：https://dev.to/akhilarjun/one...翻譯：公衆號《前端全棧開發者》