翻譯自：https://dev.to/akhilarjun/one-line-dark-mode-using-css-24licss
本文將介紹一種簡單易懂的方法實現網站暗黑模式html
話很少說，咱們開始吧！👾vue
如下面新聞應用程序爲例👇：web
如今僅需增長如下一行魔法 CSS：微信
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
添加完成後頁面展現效果：編輯器
哇偶！瞬間轉換成暗黑模式有沒有✌️
解析
filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡一般用於調整圖像，背景和邊框的渲染。（參考：MDN Web文檔）flex
對於暗黑模式，將使用兩個 filter ：invert 和 hue-rotate網站
invert：反轉配色。黑色變爲白色，白色變爲黑色，全部顏色都是如此spa
hue-rotate：幫助咱們處理全部其餘非黑色和白色的顏色。將色相旋轉180度，咱們確保應用程序的顏色主題不會改變，而只是減弱其顏色。.net
這個方法的惟一缺點是，它還會反轉應用程序中的全部圖像。
所以，咱們將對全部圖像添加相同的規則，以逆轉效果。
html[theme='dark-mode'] img{
filter: invert(1) hue-rotate(180deg);
}
咱們還將向HTML元素添加一個 transition ，以確保過渡不會過於花哨!
html {
transition: color 300ms, background-color 300ms;
}
實現結果👇：
本文分享自微信公衆號 - Vue中文社區（vue_fe）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。