其實黑暗模式可以用一行代碼來實現。我們看看具體是怎麼做到的。🤔
以這個模板爲例🖥
現在添加神奇的 CSS
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
就這些！你搞定了✌
黑暗模式完成，但其實有點不合適。
說明
現在我們試着看看幕後發生了什麼。
filter 這個 CSS 屬性將模糊或顏色偏移等圖形效果應用於某個元素。這些濾鏡通常用於調整圖像、背景和邊框的渲染。
- 參考：MDN Web 文檔
對於這種黑暗模式，我們將使用兩個濾鏡，分別是 invert 和 hue-rotate
invert 濾鏡用來反轉應用程序的配色方案。也就是說黑色會變成白色，白色變成黑色，所有顏色以此類推。invert() 函數作爲 filter 屬性的值將取 0 到 1 之間的數字，或 0％到 100％的百分比。
hue- rotate 濾鏡可以幫助我們處理所有非黑色和白色的顏色。它能將色相旋轉 180 度，讓我們可以確保應用程序的配色方案不變，而只是減弱其顏色。
使用這種方法的唯一陷阱是，它還將反轉應用程序中的所有圖像、圖片和視頻。因此，我們將向所有圖像添加相同的規則以反轉效果。
html[theme='dark-mode'] img,
picture,
video{
filter: invert(1) hue-rotate(180deg);
}
並且我們要添加一個類，以反轉特定標籤內的效果。
.invert {
filter: invert(1) hue-rotate(180deg);
}
結果🧑🧑
這樣我們就成功實現了黑暗模式。
BBulma 和 Bulma 的模板是基於 Flexbox 的免費開源 CSS 框架。