黑色的网页代码（几行代码给网站添加暗黑模式）

很多网站都需要添加暗黑模式
    
    
    
    
 ，怎么添加呢     


     


     


     


     ，有一种简单的方式

只需在 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" 就行了