业务需求

上个月，老板有一个需求，如下：

系统黑色主题功能会将原有的白色部分变为黑色，但是在黑色主题下面层次不太分明，要在黑色主题的情况下面，系统的各个部分更加的分明

简单来说，就是如下的一个情况，假设原来的黑色主题之后是：

从图中我们可以看出来AB,AC的层次不是很分明，所以我们需要改成在黑色主题下如下的一种情况：

从图中我们可以看出来AB和AC的层次感就很分明了。

实现调研

基于这个老板提出的需求，对市场上的方法进行了调研，大致上有三种不同的方法来实现这个需求，

1. 基于切换不同的样式，然后在不同的样式里面去设置不同的样式
2. 通过CSS滤镜
3. 通过使用CSS3的混合图层

切换样式

这种方法较为简单，原理就是通过切换绑定不同的className来实现的，这里不做过多的累赘。

优点：逻辑简单方便理解

缺点：开发工作量比较大

CSS滤镜

原理就是，通过向body上面绑定如下的CSS来实现的：

body{ filter: invert(100%) hue-rotate(180deg) brightness(115%) contrast(95%) !important; }

优点：一行代码实现黑色主题功能，简单易于维护

缺点：不能满足需求的要求，不能实现对区域的主题颜色自定义

CSS3混合图层

CSS3提供了一个混合图层的特性，我们可以通过这个混合图层的特性来实现主题颜色的切换。

原理：通过在body下面构造一层图层，图层的样式设置为：

mix-blend-mode: difference;

即可实现主题颜色的切换，相比于上面的其他方法，这种方案还支持对特定区域进行隔离，来达到重新定义样式的效果。 这里推荐一个类库:(sandoche/Darkmode.js: 🌓 Add a dark-mode / night-mode to your website in a few seconds (github.com))

方案接入

基于上面的讨论，我们大致可以知道方案三混合图层的方案是最优的一种方案。

所以在一开始的时候我是打算要选择darkmode.js来实现的。

在于公司系统进行对接的时候发现了这个类库存在的一些问题还是比较难以解决的：

• darkmode.js源码层面上已经将遮罩层的z-index属性值固定了，所以在与公司项目中用到的UI库ant-design结合使用的情况下，出现了z-index高度超过了遮罩层的高度，所以只能通过二次开发darkmode.js来实现对高度的可自定义的效果，但是每种属性如果都要支持自定义的话，二次开发的代码将会越来越难以维护
• 冗余的设计，对外暴露的方法isActivated showWidget 是完全没有必要的，是否激活的状态，我们只需要维护外部传入状态为true/false就行了，对于这种业务需求也没有必要提供显示交互的按钮，应该要将更多的交互权限给予业务开发
• 不能够自定义遮罩层，不能满足遮罩层的复杂交互情况

重新造轮子

基于darkmode的原理，针对存在的问题，重新设计了类库：

react-dark-mode-lib

优点：

1. 满足darkMode的遮罩层功能
2. 遮罩层能够自定义添加操作按钮等元素来实现自定义(添加的方式可查看readme.md或者查看example的实现)
3. 内部维护了单例模式，避免了热更新多次渲染节点
4. darkmode.js目前维护更新不大，但是react-dark-mode-lib会持续维护中

缺点：

1. 轮子比较新，可能会存在一些bug，公司项目慎用