uniapp底层颜色

Uniapp 底层颜色配置方法

Uniapp 的底层颜色通常指主题色、背景色或原生组件默认颜色，可通过以下方式修改：

全局主题色配置
在 uni.scss 文件中定义全局变量，影响组件库（如uni-ui）的默认颜色：

$uni-primary: #007AFF; // 修改主色调
$uni-bg-color: #F7F7F7; // 修改默认背景色

原生导航栏颜色
在 pages.json 中针对单页面或全局设置导航栏颜色：

{
  "globalStyle": {
    "navigationBarBackgroundColor": "#1AAD19", // 全局导航栏背景色
    "backgroundColor": "#F8F8F8" // 窗口背景色
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarBackgroundColor": "#FF0000" // 页面独享配置
      }
    }
  ]
}

状态栏颜色（APP端）
通过 plus.navigator 接口动态修改状态栏背景：

// 在App.vue或页面中调用
plus.navigator.setStatusBarBackground('#000000');
plus.navigator.setStatusBarStyle('light'); // 状态栏文字颜色

注意事项

• 部分组件（如tabBar）的颜色需在 pages.json 中单独配置。
• H5端部分样式可能受浏览器默认样式影响，需通过CSS重置。
• 安卓端状态栏颜色可能需配合沉浸式布局使用。