uniapp app端设置根样式:root（）

你好， app端不支持， 建议将css变量定义放到页面组件的根标签，然后js动态调整根标签的css变量值

css 变量使用demo

<template>  
    <view class="content" :style="{'--color': cssColor }">  
        <text>test css变量</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                cssColor: "red"  
            }  
        },  
        mounted() {  
            setInterval(() => {  
                this.cssColor = this.cssColor == 'blue' ? 'red' : 'blue'  
            },1000)  
        },  
    }  
</script>  

<style>  
    page {  
        --color: #ccc  
    }  

    .content {  
        color: var(--color);  
    }  
</style>  

<template>  
    <view class="" :style="{ '--mobile': isSmall }">  
    </view>  
</template>  
<script>  
    export default {  
        globalData: {  
            _i18n: {},  
        },  
        data() {  
            return {  
                isSmall: 0.65  
            };  
        },  
        onLaunch: function() {  
            setInterval(() => {  
                this.isSmall = this.isSmall === 0.65 ? 0.5 : 0.65;  
                console.log('this.isSmall', this.isSmall)  
            }, 5000);  
        },  
        onShow: function() {  

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

<style lang="scss">  
    @import '@/static/common.scss';  
</style>  
<style>  
    /* #ifndef APP-PLUS-NVUE */  
    page {  
        --mobile: 0.5;  
    }  

    /* #endif */  
</style>  

这是我写在APP.vue的变量，这个变量每个vue文件都会获取到，但是不会变，同样的代码写到单独的vue文件，变量就会变了，是不是因为我两个style顺序关系，但是scss写下面的话，页面都会乱。。求大神帮忙看看

    /**  
     * 设置主题色  
     * @param state  
     * @param val  
     */  
    setThemeColor (state, val) {  
        state.themeColor = val;  
        // 在H5环境中更新CSS变量  
        // #ifdef H5  
        const root = document.documentElement;  
        if (root) {  
            root.style.setProperty('--theme-color', state.themeColor);  
        }  
        // #endif  

        // 在App环境中更新CSS变量  
        // #ifdef APP-PLUS  
        try {  
            plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");  
            // 设置CSS变量 - 使用更兼容的方式  
            const webView = plus.webview.currentWebview();  
            if (webView) {  
                // 通过evalJS设置CSS变量  
                const script = `document.documentElement.style.setProperty('--theme-color', '${state.themeColor}');  
                `;  
                webView.evalJS(script);  
            }  

            // 同时更新所有已打开的webview  
            const webviews = plus.webview.all();  
            webviews.forEach(view => {  
                const updateScript = `document.documentElement.style.setProperty('--theme-color', '${state.themeColor}');  
                `;  
                view.evalJS(updateScript);  
            });  
        } catch (error) {  
            console.warn('设置App主题色失败:', error);  
        }  
        // #endif  
    }  

// 使用方法 app.vue onShow 的时候进行调用
commt('setThemeColor',"#165DFF")

// 注意事项，发现app 中切换页面的时候，无效
app.vue methods 中添加路由监听方法

/**

• 监听路由变化
  */
  async watchRouter() {
  const that = this;
  let RouterTypes = ['navigateTo', 'redirectTo', 'switchTab', 'navigateBack', 'reLaunch'];
  RouterTypes.forEach(item => {
  console.log("App watchRouter=", item);
  uni.addInterceptor(item, {
  invoke(e) {
  console.log("App watchRouter invoke=", e,e.url);
  },
  success(e) {
  setTimeout(() => {
  // #ifdef APP-PLUS
  that.$store.commit("setThemeColor", that.$store.state.themeColor);
  // #endif
  }, 500); // 延迟确保页面加载完成
  }
  });
  })
  },

h5端 方法二是正常的