很多網站都需要添加暗黑模式，怎么添加呢，有一種簡單的方式
只需在 css 代碼中添加這么一句
html[theme="dark-mode"] {
filter: invert(1) hue-rotate(180deg);
}
filter：將模糊或顏色偏移等圖形效果應用于元素，濾鏡通常用于調整影像，背景和邊框的渲染，
對于暗黑模式，將使用兩個 filter 的兩個屬性：invert 和 hue-rotate：
-
invert：反轉配色，黑色變為白色，白色變為黑色，其它顏色也都是如此， -
hue-rotate：幫助我們處理所有其他非黑色和白色的顏色，將色相旋轉 180 度，確保應用程式的顏色主題不會改變，而只是減弱其顏色，
但是缺點是，它會反轉應用程式中的所有影像的顏色，這是我們不希望看到的，所以我們應該再把影像反轉回去
html[theme="dark-mode"] img {
filter: invert(1) hue-rotate(180deg);
}
給打開暗黑模式添加過渡
html {
transition: color 300ms, background-color 300ms;
}
然后需要添加暗黑模式的時候就只需要給 html 根標簽添加 theme="darkmode" 就行了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544132.html
標籤：Html/Css
上一篇：HTMLCollection 和 Nodelist 的異同？
下一篇：pnpm的基本原理及快速使用