uniapp 背景色

设置全局背景色

在 App.vue 文件中通过 CSS 设置全局背景色。修改 style 部分的内容如下：

page {
  background-color: #f5f5f5; /* 自定义颜色值 */
}

此方法会影响所有页面的背景色，适用于统一的主题风格。

设置单页面背景色

在具体页面的 <style> 标签中定义背景色，仅对当前页面生效：

<style scoped>
.page-container {
  background-color: #ffffff; /* 页面容器背景色 */
  min-height: 100vh; /* 确保背景覆盖整个屏幕 */
}
</style>

在模板中使用 class="page-container" 包裹内容。

动态修改背景色

通过 JavaScript 动态调整背景色，例如根据用户主题偏好切换：

// 在 Vue 方法中操作样式
changeBackground(color) {
  uni.setBackgroundColor({
    backgroundColor: color, // 传入颜色值如 '#000000'
    backgroundColorTop: color, // 顶部背景色（仅iOS）
    backgroundColorBottom: color // 底部背景色（仅iOS）
  });
}

注意事项

• 平台差异：部分小程序平台可能限制全局背景色修改，需测试兼容性。
• 性能优化：避免频繁动态修改背景色，可能导致渲染性能下降。
• 暗黑模式适配：可通过 CSS 变量或媒体查询实现自适应背景色：

  @media (prefers-color-scheme: dark) {
    page {
      background-color: #333333;
    }
  }