作者丨Dip Vachhani
譯者丨王強
策劃丨小智
其實黑暗模式可以用一行代碼來實現。我們看看具體是怎麼做到的。
以這個模板為例：
現在添加神奇的 CSS
html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg);}
就這些！你搞定了。
黑暗模式完成，但其實有點不合適。
說 明
現在我們試著看看幕後發生了什麼。
filter 這個 CSS 屬性將模糊或顏色偏移等圖形效果應用於某個元素。這些濾鏡通常用於調整圖像、背景和邊框的渲染。
參考：MDN Web 文檔
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
對於這種黑暗模式，我們將使用兩個濾鏡，分別是 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 框架。
延伸閱讀：
https://dev.to/dip15739/dark-mode-with-only-1-css-property-17fl
InfoQ 讀者交流群上線啦！各位小夥伴可以掃描下方二維碼，添加 InfoQ 小助手，回覆關鍵字“進群”申請入群。回覆“資料”，獲取資料包傳送門，註冊 InfoQ 網站後，可以任意領取一門極客時間課程，免費滴！大家可以和 InfoQ 讀者一起暢所欲言，和編輯們零距離接觸，超值的技術禮包等你領取，還有超值活動等你參加，快來加入我們吧！
點個在看少個 bug
轉載請超鏈接註明：頭條資訊 » 一行代碼實現黑暗模式
免責聲明
：非本網註明原創的信息，皆為程序自動獲取互聯網，目的在於傳遞更多信息，並不代表本網贊同其觀點和對其真實性負責；如此頁面有侵犯到您的權益，請給站長發送郵件，並提供相關證明(版權證明、身份證正反面、侵權鏈接)，站長將在收到郵件24小時內刪除。