微信小程序主题切换

第1步：添加样式配置文件 style.config.js

说明：_style 里的对象名是第2步全局变量mainModeName的值

let _style = {
  "light":{
    "--text-color-1":"#000001;",//文本颜色1
    "--text-color-2":"#000002;",//文本颜色2
    "--border-cover-1":"#000003",//边框线1
    "--border-cover-2":"#000004",//边框线2
    "--background-color-1": "#FFFFFF",//主要背景色1
    "--background-color-2": "#FFFFFF",//主要背景色2
    //..........
  },
  "dark":{
    "--text-color-1":"#FFFFFF;",//文本颜色1
    "--text-color-2":"#FFFFFF;",//文本颜色2
    "--border-cover-1":"#FFFFFF",//边框线1
    "--border-cover-2":"#FFFFFF",//边框线2
    "--background-color-1": "#000001",//主要背景色1
    "--background-color-2": "#000002",//主要背景色2
    //..........
  }
}
module.exports = {
  style:_style
}

第2步：app.js设置全局主题变量；引入第1步的样式配置文件

// 引入样式配置
const { style } = require('./config/style.config')
App({
 	style,
	globalData:{
	    // 主题模式 自定义名称: light or dark or ....
	    mainModeName: wx.getStorageSync('mainModeName') ||'light'
	}
})

第3步：页面.js读取配置

const app = getApp()
Page({
  onLoad(options) {
    // 获取并设置页面主题样式
    this.setMainMode(app.data.mainModeName)
  },
  //设置页面主题样式
  setMainMode(mainModeName) {
    const mainModeStyle = app.style[mainModeName]
    let mainModeStyleArr  = []
    for(let key in mainModeStyle){ mainModeStyleArr.push(key+':'+mainModeStyle[key]) }
    this.setData({ mainModeStyle: mainModeStyleArr.join(';') })
    //缓存，下次加载小程序默认配置上次的主题
    wx.setStorageSync('mainModeName',mainModeName)
    app.globalData.mainModeName = mainModeName
  }
}) 

第4步：页面.wxml引用配置

说明：页面顶级标签设置style属性值包含mainModeStyle

<view style="{{mainModeStyle}}">
	<view class="color-1">
		主题文字颜色1
	</view>
	<view class="color-2">
		主题文字颜色2
	</view>
	<view class="background-1">
		主题背景颜色1
	</view>
	<view class="background-2">
		主题背景颜色2
	</view>
</view>

第5步：页面.wxss应用主题样式

.color-1{
  color:var(--text-color-1);
}
.color-2{
  color:var(--text-color-2);
}
.background-2{
  background-color:var(--background-color-1);
}
.background-1{
  background-color:var(--background-color-2);
}

ok啦