一、前置知识点

JS设置CSS变量

• 通过document.documentElement.style.setProperty()方法将变量设置为CSS变量。
• 例如下面的用法：

document.documentElement.style.setProperty('--myColor', 'pink');
document.documentElement.style.setProperty('--myColor', 'pink');
document.documentElement.style.setProperty('--myColor', 'pink');

CSS变量

• CSS3中引入了CSS变量的概念，使用var()函数代表变量名，从而使得CSS样式可以重复使用。通过使用var()函数，我们可以方便地引用一些在CSS预处理器中定义的变量，这些变量可以控制各种不同样式的输出。
• 例如下面的用法：

.activeVersion{
  color: var(--myColor);
}
.activeVersion{
  color: var(--myColor);
}
.activeVersion{
	color: var(--myColor);
}

二、可用场景

更换主题色、切换局部样式、不方便使用动态样式与动态类名时、多页面同主题等等

三、代码思路详解（主题切换示例）

• 通过JS逻辑设置CSS变量，可实现样式与逻辑的动态交互，可替代动态样式、动态类名等场景需求；
• 设置页面变量、全局变量或本地存储等控制当前JS逻辑;
• 注意:app.vue不要设置样式隔离scoped，.activeVersion类名就可以全局访问。

app.vue

• 1、设置全局变量用于某个页面触发切换主题事件
• 2、在小程序创建时创建主题色的css变量
• 3、在css中设置一个类名，并使用css变量

<script>
  export default {
    // 定义全局变量
    globalData: {
      themeFlag: false，
                        colorCont:'yellow',
                        bgColorCont:'aqua'
    },
    onLaunch: function() {
      //设置CSS变量
      document.documentElement.style.setProperty('--myColorOne', 'yellow');
      document.documentElement.style.setProperty('--myColorTwo', 'aqua');
    },
    onShow: function() {
      console.log('App Show')
    },
    onHide: function() {
      console.log('App Hide')
    },
  }
</script>
<style lang="scss">
  // 使用css变量
  .activeVersion {
    color: var(--myColorOne);
    background-color: var(--myColorTwo);
  }
</style>
<script>
  export default {
    // 定义全局变量
    globalData: {
      themeFlag: false，
                        colorCont:'yellow',
                        bgColorCont:'aqua'
    },
    onLaunch: function() {
      //设置CSS变量
      document.documentElement.style.setProperty('--myColorOne', 'yellow');
      document.documentElement.style.setProperty('--myColorTwo', 'aqua');
    },
    onShow: function() {
      console.log('App Show')
    },

    onHide: function() {
      console.log('App Hide')
    },
  }
</script>

<style lang="scss">
  // 使用css变量
  .activeVersion {
    color: var(--myColorOne);
    background-color: var(--myColorTwo);
  }
</style>
<script>
	export default {
		// 定义全局变量
		globalData: {
			themeFlag: false，
                        colorCont:'yellow',
                        bgColorCont:'aqua'
		},
		onLaunch: function() {
			//设置CSS变量
			document.documentElement.style.setProperty('--myColorOne', 'yellow');
			document.documentElement.style.setProperty('--myColorTwo', 'aqua');
		},
		onShow: function() {
			console.log('App Show')
		},

		onHide: function() {
			console.log('App Hide')
		},
	}
</script>

<style lang="scss">
	// 使用css变量
	.activeVersion {
		color: var(--myColorOne);
		background-color: var(--myColorTwo);
	}
</style>

index.vue

• 1、获取app实例
• 2、定义切换主题事件
• 3、不同主题状态不同逻辑
• 4、页面标签可直接使用app.vue的类名，注意当前页面不要再定义相同类名，会被覆盖

<template>
  <view class="box">
    <button @click="versionChange">切换主题</button>
    <view class="activeVersion">变色龙一号</view>
    <button class="activeVersion">变色龙二号</button>
    <text class="activeVersion">变色龙三号</text>
  </view>
</template>
<script>
  // 获取app实例
  const app = getApp();
  export default {
    name: "index",
    data() {
      return {};
    },
    onLoad() {},
    methods: {
      versionChange() {
        // 获取全局变量
        console.log('版本', app.globalData.themeFlag);
        // 全局变量赋反
        app.globalData.themeFlag = !app.globalData.themeFlag
                          //逻辑赋值
        if (app.globalData.themeFlag) {
          app.globalData.colorCont='#fff'
          app.globalData.bgColorCont='yellow'
        } else {
          app.globalData.colorCont='pink'
          app.globalData.bgColorCont='aqua'
        }
                            //设置css变量
                            document.documentElement.style.setProperty('--myColorOne', app.globalData.colorCont);
                            document.documentElement.style.setProperty('--myColorTwo', app.globalData.bgColorCont);
      },
    },
    components: {}
  }
</script>
<style lang="scss" scoped></style>
<template>
  <view class="box">
    <button @click="versionChange">切换主题</button>
    <view class="activeVersion">变色龙一号</view>
    <button class="activeVersion">变色龙二号</button>
    <text class="activeVersion">变色龙三号</text>
  </view>
</template>
<script>
  // 获取app实例
  const app = getApp();
  export default {
    name: "index",
    data() {
      return {};
    },

    onLoad() {},
    methods: {
      versionChange() {
        // 获取全局变量
        console.log('版本', app.globalData.themeFlag);
        // 全局变量赋反
        app.globalData.themeFlag = !app.globalData.themeFlag
                          //逻辑赋值
        if (app.globalData.themeFlag) {
          app.globalData.colorCont='#fff'
          app.globalData.bgColorCont='yellow'
        } else {
          app.globalData.colorCont='pink'
          app.globalData.bgColorCont='aqua'
        }
                            //设置css变量
                            document.documentElement.style.setProperty('--myColorOne', app.globalData.colorCont);
                            document.documentElement.style.setProperty('--myColorTwo', app.globalData.bgColorCont);
      },
    },
    components: {}
  }
</script>
<style lang="scss" scoped></style>
<template>
	<view class="box">
		<button @click="versionChange">切换主题</button>
		<view class="activeVersion">变色龙一号</view>
		<button class="activeVersion">变色龙二号</button>
		<text class="activeVersion">变色龙三号</text>
	</view>
</template>
<script>
	// 获取app实例
	const app = getApp();
	export default {
		name: "index",
		data() {
			return {};
		},

		onLoad() {},
		methods: {
			versionChange() {
				// 获取全局变量
				console.log('版本', app.globalData.themeFlag);
				// 全局变量赋反
				app.globalData.themeFlag = !app.globalData.themeFlag
                          //逻辑赋值
				if (app.globalData.themeFlag) {
					app.globalData.colorCont='#fff'
					app.globalData.bgColorCont='yellow'
				} else {
					app.globalData.colorCont='pink'
					app.globalData.bgColorCont='aqua'
				}
                            //设置css变量
                            document.documentElement.style.setProperty('--myColorOne', app.globalData.colorCont);
                            document.documentElement.style.setProperty('--myColorTwo', app.globalData.bgColorCont);
			},
		},
		components: {}
	}
</script>
<style lang="scss" scoped></style>