@media (prefers-color-scheme: dark) { html, body {filter: invert(1) hue-rotate(180deg);}img, video,audio{@include hover-change(#4B4B4B,white);} }

這種簡單的黑暗模式采用了2個濾鏡：
1.invert

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

2.hue- rotate

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

存在缺點:

將反轉應用程序中的所有圖像、圖片和視頻。此時的圖像、圖片和視頻變顏色變糊了。

解決缺陷方案-在反轉基礎上在重新反轉還原

img, video,audio{@include hover-change(#4B4B4B,white);}

總結

以上是生活随笔為你收集整理的h5深色模式快速适配背景和字体颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。