很多網站都需要添加暗黑模式，怎麼添加呢，有一種簡單的方式 只需在 css 代碼中添加這麼一句 html[theme="dark-mode"] { filter: invert(1) hue-rotate(180deg); } filter：將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像， ...
很多網站都需要添加暗黑模式，怎麼添加呢，有一種簡單的方式
只需在 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" 就行了
