一、核心简化思路（仅 HarmonyOS Next）

针对 HarmonyOS Next 纯原生模式，无需逐个页面 / 组件修改样式，核心方案是：全局 CSS 变量统一管理浅色 / 深色样式 + 自动监听系统主题切换，仅需定义一次全局样式规则，所有页面 / 组件自动继承，彻底避免 “逐个顾及” 的麻烦。

二、最简实现步骤（仅 HarmonyOS Next）

步骤 1：全局定义主题 CSS 变量（核心，仅需写一次）

在App.vue的<style>中定义浅色 / 深色模式的全局 CSS 变量，覆盖所有通用样式（背景、文字、边框、按钮等），所有页面 / 组件直接使用变量，无需单独写样式。

vue

<!-- App.vue -->
<template>
  <view>
    <router-view />
  </view>
</template>

<script>
export default {
  onLaunch() {
    // 初始化主题（页面加载时同步系统主题）
    this.initTheme();
    // 监听系统主题切换（HarmonyOS Next）
    this.watchThemeChange();
  },
  methods: {
    // 初始化主题：获取系统当前主题并设置
    initTheme() {
      const systemInfo = uni.getSystemInfoSync();
      // HarmonyOS Next中，systemInfo.theme返回'dark'/'light'
      const theme = systemInfo.theme || 'light';
      document.documentElement.setAttribute('data-theme', theme);
    },
    // 监听主题切换（HarmonyOS Next系统级监听）
    watchThemeChange() {
      // UniApp跨端API：监听系统主题变化
      uni.onThemeChange((res) => {
        document.documentElement.setAttribute('data-theme', res.theme);
      });
    }
  }
};
</script>

<style lang="scss">
/* 全局样式重置（可选） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 1. 浅色模式（默认） */
:root {
  --bg-color: #ffffff;       // 全局背景
  --text-color: #333333;     // 主文字
  --sub-text-color: #666666; // 次要文字
  --border-color: #eeeeee;   // 边框
  --button-bg: #007aff;      // 按钮背景
  --button-text: #ffffff;    // 按钮文字
}

/* 2. 深色模式（HarmonyOS Next） */
:root[data-theme="dark"] {
  --bg-color: #1a1a1a;       // 深色背景
  --text-color: #f5f5f5;     // 深色文字
  --sub-text-color: #cccccc; // 深色次要文字
  --border-color: #333333;   // 深色边框
  --button-bg: #0056d2;      // 深色按钮背景
  --button-text: #ffffff;    // 深色按钮文字
}

/* 全局通用样式：直接使用变量，所有页面继承 */
page {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
}

/* 通用按钮样式（全局生效） */
.btn {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--border-color);
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
}

/* 通用文本样式 */
.text-sub {
  color: var(--sub-text-color);
}
</style>

步骤 2：页面 / 组件直接使用全局变量（零额外修改）

所有页面 / 组件无需写深色模式逻辑，直接使用App.vue定义的 CSS 变量，自动跟随系统主题切换：

vue

<!-- 任意页面（如index.vue） -->
<template>
  <view class="page-container">
    <text class="title">鸿蒙深色模式测试</text>
    <text class="text-sub">自动适配系统主题</text>
    <button class="btn" type="default">通用按钮</button>
  </view>
</template>

<style scoped>
/* 页面专属样式：仅补充个性化，仍用全局变量 */
.page-container {
  padding: 40rpx;
  border-bottom: 1px solid var(--border-color);
}

.title {
  font-size: 36rpx;
  color: var(--text-color); // 直接用全局变量
  margin-bottom: 20rpx;
}
</style>

步骤 3：HarmonyOS Next 原生配置增强（可选，优化体验）

如需让鸿蒙原生层（如状态栏、窗口背景）也适配深色模式，在native/ohos/module.json5中配置主题支持：

json

{
  "$schema": "https://developer.harmonyos.com/cn/schemas/ohos/module.json5/v3",
  "module": {
    "abilities": [
      {
        "name": "MainAbility",
        // 配置深色模式支持
        "colorMode": "auto", // 自动跟随系统主题（light/dark/auto）
        "window": {
          "backgroundColor": "#00000000", // 透明，跟随页面CSS
          "navigationBarColor": "auto",   // 导航栏自动适配主题
          "statusBarColor": "auto"        // 状态栏自动适配主题
        }
      }
    ]
  }
}

三、进阶优化（可选，针对特殊场景）

1. 图片 / 图标适配（无需多套图片）

用 CSS 变量控制背景图，或使用 SVG / 字体图标（自动继承颜色）：

css

/* 图标适配：SVG/字体图标直接继承文字颜色 */
.icon {
  font-family: "iconfont";
  color: var(--text-color);
  font-size: 40rpx;
}

/* 背景图适配：通过变量切换 */
.bg-img {
  background-image: var(--bg-img);
}
:root { --bg-img: url('/static/bg-light.png'); }
:root[data-theme="dark"] { --bg-img: url('/static/bg-dark.png'); }

2. 鸿蒙原生组件适配（少量特殊组件）

若使用鸿蒙原生组件（如ohos-map），通过条件编译 + 变量适配：

vue

<template>
  <!-- 鸿蒙原生组件仅在HarmonyOS Next生效 -->
  <view v-if="isHarmonyNext">
    <ohos-map :style="{background: var(--bg-color)}"></ohos-map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isHarmonyNext: uni.getSystemInfoSync().osName === 'harmonyos'
    };
  }
};
</script>

四、对比官方方案的核心优势

五、HarmonyOS Next 专属注意事项

1. 主题监听兼容性：UniApp 的uni.onThemeChange在 HarmonyOS Next 中已原生支持，无需额外原生代码；
2. 避免内联样式：内联样式（如style="color: #333"）不会继承 CSS 变量，尽量用 class；
3. 性能优化：全局 CSS 变量是浏览器原生特性，HarmonyOS Next 中无性能损耗，比 JS 动态修改样式更高效；
4. 隐私 / 权限：适配深色模式无需申请权限，仅需跟随系统主题即可。

六、相关文档（精准参考）

1. UniApp 主题切换 API：跨端主题监听；
2. HarmonyOS Next 深色模式配置：原生层主题配置；
3. CSS 变量官方文档：全局变量使用规范。

总结

适配 HarmonyOS Next 深色模式的最简路径：全局 CSS 变量定义样式 + 自动监听系统主题切换，仅需在App.vue中写一次全局样式和监听逻辑，所有页面 / 组件直接使用变量，无需逐个修改，彻底解决 “每个地方都要顾及” 的痛点。