如果动态修改uni.scss、动态自定义全页面的css颜色方案

动态设置主题 css，找了些方案，感觉这个最方便，分享给大家~点个赞吧！

1. 动态设置uni.scss（这个官方不支持，所以换方案）
2. 用js控制css变量（最佳最好的方向）

那我们就用第二种方案，如果js控制css呢？ 上方案！

首先要在顶部声明：<component is="style">:root {--bg-color: {{bgColor}}}</component> （为什么用这个 去看下vue文档）

然后具体看代码

<template>  
    <view class="content">  
        <component is="style">:root {--bg-color: {{bgColor}}}</component>  
        <!-- 布局 -->  
        <view class="theme">测试</view>  
        <view>文字1234</view>  
        <view @click="btn">更改</view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                bgColor: "#4FAD50",  
            }  
        },  
        methods: {  
            btn() {  
                this.bgColor = 'red'  
            },  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .theme {  
        color: var(--bg-color);  
    }  
</style>  

这样，当你点击更改的时候 颜色就被更改了！很方便 很灵活！

页面的侵入也不复杂 加个component， 给对应的文字加个css .theme 解决！后续通过vuex想怎么改 怎么改！

好了~方案到此结束！ 点个赞吧！~