uniapp 切换主题色，如何获取:root

在uniapp中实现APP端主题色切换，可以通过以下步骤操作：

解决方案

// 在App.vue或全局方法中定义  
const setThemeColor = (newColor) => {  
  // H5平台直接修改:root  
  // #ifdef H5  
  document.documentElement.style.setProperty('--theme-color', newColor);  
  // #endif  

  // APP平台操作页面根节点  
  // #ifdef APP-PLUS  
  const query = uni.createSelectorQuery().in(this);  
  query.select('.uni-page-body') // 关键选择器  
    .boundingClientRect(rect => {  
      if (rect) {  
        // 通过node节点设置CSS变量  
        rect.node.setStyle({  
          '--theme-color': newColor  
        });  
      }  
    }).exec();  
  // #endif  
}

实施步骤

1. 确定根节点选择器
   在H5端用浏览器开发者工具检查，发现uniapp页面根节点为.uni-page-body类名。APP端使用相同选择器：

   <!-- 页面结构示例 -->  
   <view class="uni-page-body">  
    <!-- 页面内容 -->  
   </view>  

2. 全局样式定义
   在App.vue的<style>中定义基础变量：

   /* #ifdef H5 */  
   :root {  
    --theme-color: #007AFF;  
   }  
   /* #endif */  
   
   /* #ifdef APP-PLUS */  
   .uni-page-body {  
    --theme-color: #007AFF;  
   }  
   /* #endif */  

3. 组件中使用变量
   在任意组件样式中直接使用：

   .button {  
    background: var(--theme-color);  
   }  

4. 状态管理（可选）
   结合Vuex管理主题色状态：

   // store.js  
   state: {  
    themeColor: '#007AFF'  
   },  
   mutations: {  
    setThemeColor(state, color) {  
      state.themeColor = color;  
      setThemeColor(color); // 触发样式更新  
    }  
   }  

注意事项

1. 作用域问题
   APP端通过.uni-page-body设置的变量仅在当前页面生效，切换页面需重新设置。建议：

   • 在onShow生命周期中监听主题变化
   • 使用Vuex全局状态管理

2. 性能优化
   避免频繁调用setThemeColor，可添加防抖：

   let timer;  
   const setThemeColor = (newColor) => {  
    clearTimeout(timer);  
    timer = setTimeout(() => {  
      // 原有逻辑  
    }, 300);  
   }  

3. 深色模式适配
   可扩展为多主题方案：

   const THEMES = {  
    light: '--theme-color: #007AFF;',  
    dark: '--theme-color: #2D8CF0;'  
   }  
   
   const setTheme = (themeName) => {  
    const style = document.createElement('style');  
    style.type = 'text/css';  
    style.innerHTML = `:root { ${THEMES[themeName]} }`;  
    // APP端需操作.uni-page-body  
   }  

替代方案（如遇兼容问题）

若上述方法在特定机型失效，可改用CSS类名切换：

/* 定义两套主题样式 */  
.theme-light { --theme-color: #007AFF; }  
.theme-dark { --theme-color: #2D8CF0; }

// 切换逻辑  
document.documentElement.className = `theme-${newTheme}`;  
// APP端操作.uni-page-body的class

通过这种方式，可在不修改各页面代码的前提下实现全局主题切换，解决APP端无法直接操作:root的问题。实际效果需在真机测试，部分机型可能需要调整选择器或样式作用域。