css变量系列（2）：小程序中使用css变量实现改变主题颜色

使用css控制

/* app.wxss */
/* web开发中顶层变量的key名是:root，小程序使用page */
page { 
 --themeColor: red;
}

// 使用
view {
	color: var(--themeColor)
}

这样的缺点是：
我们无法通过 js 来更灵活的控制，只能手动去代码中改page { --themeColor: red;}，当然在非小程序的项目里能拿到 dom 元素，当然也可以用 js 获取和修改全局 css 变量的，详情看这里

所以要看接下来的方法

使用js控制

// config/theme.js
const viewData = {
  myStyle: `
  --themeColor: #3b6ace;
  `
}
export default viewData

// pages/index/index.js
import viewData from '../../config/theme'
Page({
  data: {
    viewData: viewData
  }
})

给最大的view标签上注入你的全局 css，然后就可以在项目中用啦

// pages/index/index.wxml
<view style="{{ viewData.myStyle }}"></view>

// pages/index/index.wxss
// 使用
view {
	color: var(--themeColor)
}

这样就可以实现，后台配置小程序主题，小程序自动变色的功能啦~

作者：css变量系列（2）：小程序中使用css变量实现改变主题颜色_小程序css variabel_Lvan的前端笔记的博客-CSDN博客