Advertisement

用一行代码实现暗黑模式

阅读量:

牛刀小试

复制代码
    <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)

还没有任何评论哟~