原生小程序动态配置主题色

1、前言

我的项目是三个小程序，功能相同，但是主题色不同，考虑用一到代码通过控制小程序类型来切换主题色。

我们都知道在小程序app.wxss文件中，
page{
–themeColor:#5091D3;
font-size:28rpx;
}，
–themeColor可以配置主题颜色，在每个页面的index.wxss中可以使用 color: var(–themeColor);去设置按钮和文字的颜色为主题色，但是app.wxss为静态不可修改，同时除了–themeColor，怎么能定义更多的变量，去在wxss中去使用呢？

下面将介绍我是如何做到动态控制的

2、首先app.wxss和单个页面index.wsxss中page里的去掉–themeColor，在utils文件夹中创建config.js

/**小程序类型
 * 1：zhongyu  中宇
 * 2：ntx 暖天下
 * 3：floorheating 极地阳光
 */
const APPTYPE = 2
// 主题色写在内部
const themeColorStyleMap={
  1: '--themeColor: #15c5bb;--themeBgColor:#EEEEEE;',
  2: '--themeColor: #de5c3f;--themeBgColor:#EEEEEE;',
  3: '--themeColor: #5091D3;--themeBgColor:#EEEEEE;'
}

module.exports = {
  themeColorStyle: themeColorStyleMap[APPTYPE], 
}

2、在app.js中定义全局变量

import {
  themeColorStyle
} from './utils/config'
// app.js
App({
  globalData: {
    globalThemeColor: themeColorStyle
  },

})

2、在每个页面中的index.js中使用在app.js中定义的全局变量

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
   // 全局主题色--用的wxml内部
    globalStyle: app.globalData.globalThemeColor,
  },

3、在页面的index.wxml,最顶级的view中写入style，这样在每个index.wxss就可以使用var(–themeColor)动态的颜色啦,–themeColor就是我们定义的变量颜色

<view  style="{{globalStyle}}"></view>

最后，如果这篇文章对你有一点帮助，请点个赞赞，让我知道，
在这个程序员不好混的时代还有同路人(灬ꈍ ꈍ灬)