Categories
程式開發

一行代碼實現黑暗模式


其實黑暗模式可以用一行代碼來實現。我們看看具體是怎麼做到的。 🤔

以這個模板為例🖥

一行代碼實現黑暗模式 1

現在添加神奇的CSS

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

就這些!你搞定了✌

一行代碼實現黑暗模式 2

黑暗模式完成,但其實有點不合適。

說明

現在我們試著看看幕後發生了什麼。

filter 這個CSS 屬性將模糊或顏色偏移等圖形效果應用於某個元素。這些濾鏡通常用於調整圖像、背景和邊框的渲染。

對於這種黑暗模式,我們將使用兩個濾鏡,分別是invert 和hue-rotate

倒置 濾鏡用來反轉應用程序的配色方案。也就是說黑色會變成白色,白色變成黑色,所有顏色以此類推。 invert() 函數作為filter 屬性的值將取0 到1 之間的數字,或0%到100%的百分比。

色相旋轉 濾鏡可以幫助我們處理所有非黑色和白色的顏色。它能將色相旋轉180 度,讓我們可以確保應用程序的配色方案不變,而只是減弱其顏色。

一行代碼實現黑暗模式 3

使用這種方法的唯一陷阱是,它還將反轉應用程序中的所有圖像、圖片和視頻。因此,我們將向所有圖像添加相同的規則以反轉效果。

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

並且我們要添加一個類,以反轉特定標籤內的效果。

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

結果🧑‍🧑

一行代碼實現黑暗模式 4

這樣我們就成功實現了黑暗模式。

BBulma 和Bulma 的模板是基於 彈性盒 的免費開源CSS 框架。

原文鏈接

暗模式只有1個CSS屬性