利用css实现dark mode方案

•   filter: invert(1) hue-rotate(180deg);
  

invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此。

hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。

最简洁的方案：

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

• var变量
  暗黑模式风格设计自定义

  :root {

  --weui-BG-0: #......;

  --weui-BG-1: #.......;}

@media (prefers-color-scheme: dark) {

:root {

--weui-BG-0: #......;

--weui-BG-1: #......;

}

引用： .nav { background: var(--weui-BG-2); }

涉及到图片可加蒙层使暗黑变得柔和

:root {

--Opacity: 1;

}

@media (prefers-color-scheme: dark) {

:root {

--Opacity: .6;

}

}

• 以上两种方式需要浏览器对css兼容版本比较高，低版本的需要借助js 进行主题的切换