先看下效果圖吧：

夜晚模式樣式：

白天正常樣式：

先講一下具體的思路和實現(xiàn)方法吧，我這個功能是項目已經上線一年后才提出要加上去的，由于頁面比較多，重構wxSS太費力了，就選了簡單粗暴的方式，直接另外給一套夜間模式的單獨樣式，吧白天的樣式給覆蓋掉，用戶在點擊模式切換的時候，直接設置一個全局變量‘idDark’存入到緩存中，然后在去到每一個頁面的時候，在onShow方法里面讀取一下當前的’isDark’值，判斷當前是否為夜間模式，如果是就顯示夜間模式樣式，如果不是就正常顯示就ok，這里皮膚設置其實修改的全是文字和背景顏色，其實也沒多少代碼量，具體實現(xiàn)方式要你們自己去琢磨，稍微有點功底的應該就看得懂，簡單貼一段代碼吧；

wxml部分，直接在我們的盒子外圍給一個view標簽，根據(jù)isDark的值來動態(tài)控制是否需要顯示夜間模式樣式

<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部分我就不寫了,上面已經說明白原理了，還有不會或者不太明白的可以留言，我看到會第一時間回復的！