先看下效果图吧：

夜晚模式样式：

白天正常样式：

先讲一下具体的思路和实现方法吧，我这个功能是项目已经上线一年后才提出要加上去的，由于页面比较多，重构wxSS太费力了，就选了简单粗暴的方式，直接另外给一套夜间模式的单独样式，吧白天的样式给覆盖掉，用户在点击模式切换的时候，直接设置一个全局变量‘idDark’存入到缓存中，然后在去到每一个页面的时候，在onShow方法里面读取一下当前的’isDark’值，判断当前是否为夜间模式，如果是就显示夜间模式样式，如果不是就正常显示就ok，这里皮肤设置其实修改的全是文字和背景颜色，其实也没多少代码量，具体实现方式要你们自己去琢磨，稍微有点功底的应该就看得懂，简单贴一段代码吧；

wxml部分，直接在我们的盒子外围给一个view标签，根据isDark的值来动态控制是否需要显示夜间模式样式

<view class="{{isDark?'dark':''}}">
  <view class="box">
    我是内容...
  </view>
  <view class="footer">
    我是底部...
  </view>	
</view>

wxss部分,这里需要两套css文件，可以自己建一个文件夹SKIN来存放皮肤wxss文件，新建一个dark.wxss,用于编写夜间模式样式，然后在需要配置夜间模式的页面引入dark.wxss文件，记得放在最后，这样不用加！important来覆盖样式

//正常页面显示样式index.wxss文件代码，就是白天样式
.box {
  background: #ffffff;
  color: #000000;
}

.footer {
  background: #F2F2F2;
  color: #7C7C7C;
}

@import '../../assets/skin/dark.wxss';

//夜间样式dark.wxss代码
.dark {
  background: #000000;
  color: #ffffff;
}

.dark .box {
  background: #222222;
  color: #ffffff;
}

.dark  .footer {
  background: #7C7C7C;
  color: #ffffff;
}

看了应该就明白了，其实原理就是用.dark类名来覆盖原有白天样式，不要觉得麻烦，其实一个页面里面涉及到颜色的没有多少，改起来还是比较简单的，js部分我就不写了,上面已经说明白原理了，还有不会或者不太明白的可以留言，我看到会第一时间回复的！