几行代码给网站添加暗黑模式

  • 几行代码给网站添加暗黑模式已关闭评论
  • 94 次浏览
  • A+
所属分类:Web前端
摘要

很多网站都需要添加暗黑模式,怎么添加呢,有一种简单的方式只需在 css 代码中添加这么一句

很多网站都需要添加暗黑模式,怎么添加呢,有一种简单的方式

只需在 css 代码中添加这么一句

html[theme="dark-mode"] {   filter: invert(1) hue-rotate(180deg); } 

filter:将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

对于暗黑模式,将使用两个 filter 的两个属性:inverthue-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" 就行了