博客

@media (prefers-color-scheme:  dark) { 
   html, body {
		 filter: invert(1) hue-rotate(180deg);
	}
    img, video,audio{
       @include hover-change(#4B4B4B,white);
     }
}

这种简单的黑暗模式采用了2个滤镜：

1.invert

invert滤镜用来反转应用程序的配色方案。也就是说黑色会变成白色，白色变成黑色，所有颜色以此类推。invert 函数作为 filter 属性的值将取 0 到 1 之间的数字，或 0％到 100％的百分比

2.hue- rotate

滤镜可以帮助我们处理所有非黑色和白色的颜色。它能将色相旋转 180 度，让我们可以确保应用程序的配色方案不变，而只是减弱其颜色。

存在缺点:

将反转应用程序中的所有图像、图片和视频。此时的图像、图片和视频变颜色变糊了。

解决缺陷方案-在反转基础上在重新反转还原

  img, video,audio{
       @include hover-change(#4B4B4B,white);
   }