什么是暗黑模式
暗黑模式DarkMode 是不同于默认模式（高光模式）的界面风格。是以暗色为主题的风格，通常为深灰色或者黑色。
用户体验
首先，我本人是一个暗黑模式的忠实用户。暗黑模式可以给我带来安全感，让我不会有自己被裸露地曝光在很大地平台的感觉，而是有一种寒冷的暴雨天，别人打伞在外面奔跑，而我在家吹着暖风空调喝奶茶的感觉。
另外，科学地来说，**散光患者阅读”白板黑字“比阅读”黑板白字“更难。**我本人确实是个散光患者，所以在暗黑模式下阅读操作，都给我带来一种更舒适的用户体验。
最后，我认为，人在半黑暗的环境下是更容易深度思考的。我无论搬到哪里，住在开间公寓还是豪华小区还是地下室，我都会把房间内的灯调成不太明亮的暖光，并且留一片黑暗的区域。这种光线会让我在白天高强度高压力的工作之后，有一种稍微释放情绪的感觉，并且有助于我每天晚上复盘的时候进行深度思考。
本质
暗黑模式和高光模式切换的本质就是：同一个页面，在两种模式下，遵循两套不同的颜色规范。
就像我们每天早上穿衣服一样，今天我想穿衣帽间里深色系的衣服，明天我想穿浅色系的衣服，但是我还是同一个人。
暗黑模式的设计
我们可以先来看一下weui的色值变量：
分析：
第一部分（前6个变量）
--weui-BG-XXX：背景变量，高光模式下通常为浅色，暗黑模式下为深色。
第二部分（5个变量）
--weui-FG-XXX：文字变量，高光模式下通常为深色，暗黑模式下为浅色。
第三部分（10个变量）
--weui-COLOR：具体颜色变量，从--weui-RED到--weui-WHITE. 虽然是具体颜色变量，但是我们看到两种模式下颜色值并不是一致的。比如黄色，最明显的区别就是在暗黑模式下明度会低一些。就连白色，在暗黑模式下也会设置成80%的透明。在暗黑模式下，大面积地使用深灰色，那么就需要其他大部分颜色也不能特别突出才可以使页面比较柔和自然，使用户阅读起来舒服。但是我们有几个变量色值是不变的，比如红色和微信的品牌绿的绿色。使用红色的地方，一般情况下是用来做警示的，或者可以说有点draw attention的感觉，所以它必须凸显出来，不用刻意和其他颜色强调和谐。品牌色，本身就不可以变，而且微信绿在暗黑模式下其实不会违和，反而起到一个主色调的作用。
第四部分（12个变量）
--weui-XXX：类似组件变量，有链接颜色变量，标签组件变量，按钮组件变量等。取色原理同第三部分。
总结
1.白纸黑字改成黑纸白字
2.彩色部分明度降低
3.突出内容部分颜色不变
在这里，
UI设计师要决定哪些组件和哪些元素是要兼容暗黑模式和高光模式的，
然后要在下面这些变量里pick变量，赋给要兼容暗黑模式和高光模式的组件或者元素。
暗黑模式的前端实现
1、从最简单的思路开始
（1）首先，我们的思路是当页面加载进来的时候进行一个判断，是普通模式还是暗黑模式。
（2）然后根据不同的模式，赋予变量不同的值。
2、具体代码实现
（1）我们用less来举例。
（2）需要有一个light.less文件：定义高亮模式变量值
（3）需要有一个dark.less文件：定义暗黑模式变量值
（4）需要一个mode.less文件，导入light.less和dark.less
（5）用媒体查询@media 判断设备
@media (prefers-color-scheme: 属性值)
属性值：
no-preference 表示用户未制定操作系统主题。作为布尔值时，为 false 输出。
light 表示用户的操作系统是浅色主题。
dark 表示用户的操作系统是深色主题。
（6）具体判断操作，在mode.less里编写
所有页面默认采用的是高光模式。
只有用户想要使用暗黑模式的时候，暗黑模式才会根据媒体查询的判断开始生效。
（7）把mode文件，导入到总的样式文件里
（8）最后我们需要在兼容高亮模式和暗黑模式的元素类的属性里，把具体值替换成变量。
注意： 做页面有一个原则就是，越有个性的东西，就要越放在后面，导入顺序也要靠后，避免后续样式冲突。所以，在暗黑模式中，当我们要设置一些个性化的变量的时候，比如高光模式下，有一个元素有背景图，但是暗黑模式下没有背景图。这种我们就要放到单独的样式文件里，不能放到dark.less、light.less、mode.less这类文件里。
网页主题
暗黑模式是一种接近黑色系的风格，但是在实际网页设计中，还会有很多其他的风格：像2020年因为疫情，清明节全网做了灰色主题的网页。
传送门：清明节全网灰色主题实现原理
通过滤镜控制主题
我们前面说道：
1.白纸黑字改成黑纸白字
2.彩色部分明度降低
3.突出内容部分颜色不变
那我们怎样可以不依赖微信内嵌平台也可以快速写一个暗黑风格呢？
首先看 1.白纸黑字改成黑纸白字 这一条，用滤镜表达这句话就是：
filter: invert(1) //设置反相色，也就是上面说的白纸黑字变成黑纸白字
//但是彩色也会跟着反向，也就是说红色类的元素会变色绿色
拿菜鸟教程举例，原来的主色浅绿色 变成了 有点接近红色的紫色，白色背景变黑，黑色文字变白。
但是，暗黑风格要做的是要在保持品牌色的基础上去改变白色背景，所以我们要把浅绿色恢复。
这时，又有另一个滤镜出现了hue-rotate色相旋转，它有一个特点：只对彩色生效。所以我们的黑白色还是可以很好地保持原样。可以从这个圆圈里面找到刚刚的浅紫色转180度（180deg）就是浅绿色。
filter: invert(1) hue-rotate(180deg); //反向后，再进行180度的色相旋转
