uniapp底层颜色

uniapp底层颜色设置方法

在uniapp中，可以通过修改manifest.json文件或使用CSS变量来调整底层颜色。底层颜色通常指页面背景色、导航栏颜色等系统级样式。

修改全局背景色 在App.vue的style标签中设置全局样式：

page {
  background-color: #f5f5f5; /* 修改页面默认背景色 */
}

修改导航栏颜色 在pages.json中配置单个页面的导航栏样式：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#007AFF", /* 导航栏背景色 */
        "navigationBarTextStyle": "white" /* 标题颜色 */
      }
    }
  ]
}

使用CSS变量 在uni.scss中定义颜色变量：

$primary-color: #007AFF; /* 主色调 */
$bg-color: #f8f8f8; /* 背景色 */

平台差异处理

不同平台对底层颜色的支持存在差异，需要特别注意：

H5平台 支持完整的CSS样式，可以直接在样式表中修改body或html标签的背景色。

小程序平台 部分样式如窗口背景色需要在app.json中配置：

{
  "window": {
    "backgroundColor": "#ffffff"
  }
}

APP平台 需要同时配置原生样式，在manifest.json的app-plus节点下设置：

"app-plus": {
  "statusbar": {
    "style": "dark" /* 状态栏文字颜色 */
  },
  "titleNView": {
    "backgroundColor": "#007AFF" /* 标题栏背景色 */
  }
}

动态修改颜色

通过uni-app的API可以运行时修改部分底层颜色：

// 修改导航栏颜色
uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景颜色
  backgroundColor: '#007AFF' // 背景颜色
});

// 修改背景色（H5有效）
document.body.style.backgroundColor = '#f0f0f0';

最佳实践建议

1. 优先使用CSS变量管理颜色，便于维护和主题切换
2. 针对不同平台测试颜色显示效果
3. 暗黑模式适配时使用媒体查询或uni-app的自定义条件编译
4. 重要的品牌色建议写入manifest确保各平台一致性

通过以上方法可以全面控制uniapp应用的底层颜色表现，实现统一的视觉效果。