用一行代码实现暗黑模式
发布时间
阅读量:
阅读量
牛刀小试
<input type="checkbox" id="switch"/><label for="switch">Toggle</label>
/*样式反转*/
.dark-mode{
filter:invert(1) hue-rotate(180deg);
}
let toggle = document.querySelector("#switch");
toggle.addEventListener("click",()=>{document.documentElement.classList.toggle("dark-mode");});
上述代码确实完成了暗黑模式的切换功能,然而部分元素在切换过程中并未发生改变,例如按钮内的文字内容、图片以及SVG图标等。
修改
【在需要进行调整的位置处添加class属性,并将其值设定为inverted;
例如:
html代码
全部评论 (0)
还没有任何评论哟~
