Open Harmony 高端精致：应用启动页、深色模式与资源分层配置实践 🌗

前言 🌟

一个应用给用户的第一印象，往往不是首页加载完成之后才出现，而是从启动窗口就开始了。

在 OpenHarmony / HarmonyOS 应用中，启动图标、启动背景色、明暗主题资源，都可以通过配置和资源文件进行管理。当前项目虽然页面还很简单，但已经具备了启动窗口背景和深色资源目录，这正好适合写一篇“高端精致”方向的工程实践文章。

本文基于当前项目真实文件展开：

1. entry/src/main/module.json5
2. entry/src/main/resources/base/element/color.json
3. entry/src/main/resources/dark/element/color.json
4. entry/src/main/ets/entryability/EntryAbility.ets

启动窗口配置在哪里？📱

当前项目在 module.json5 中配置了启动图标和启动背景：

{
  "name": "EntryAbility",
  "srcEntry": "./ets/entryability/EntryAbility.ets",
  "icon": "$media:layered_image",
  "label": "$string:EntryAbility_label",
  "startWindowIcon": "$media:startIcon",
  "startWindowBackground": "$color:start_window_background",
  "exported": true
}

这里最值得关注的是：

"startWindowBackground": "$color:start_window_background"

它没有直接写死颜色值，而是引用了资源：

$color:start_window_background

这种写法对视觉一致性非常重要。资源引用让颜色可以统一维护，也方便后续做主题适配。

base 资源中的启动背景 🎨

项目中的基础颜色资源如下：

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    }
  ]
}

路径是：

entry/src/main/resources/base/element/color.json

这表示默认情况下，启动窗口背景是白色。

对于浅色主题应用来说，白色启动背景很常见。它可以让应用启动时看起来干净、轻量，也不会和系统浅色环境冲突。

dark 资源中的启动背景 🌙

项目还配置了深色资源：

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#000000"
    }
  ]
}

路径是：

entry/src/main/resources/dark/element/color.json

这说明当前项目已经具备深色资源分层的基础。浅色模式使用白色启动背景，深色资源中对应黑色启动背景。

需要注意的是，当前项目只是配置了启动背景资源，还没有完成完整的深色模式 UI 适配。例如首页文字、卡片、导航栏、内容区颜色都还没有系统化设计。

因此文章中更准确的说法是：项目已经具备启动窗口和深色资源分层基础，而不是已经完成完整深色模式。

EntryAbility 中的颜色模式设置 ⚙️

项目的 EntryAbility.ets 中还有一段颜色模式相关代码：

this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);

这段代码位于 onCreate：

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  try {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
  } catch (err) {
    hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
  }
  hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
}

当前设置没有强制指定浅色或深色，而是保持未设置状态。这样做适合作为基础工程起点，后续可以根据产品需求决定：

1. 跟随系统主题。
2. 应用内提供主题切换。
3. 固定浅色模式。
4. 固定深色模式。

当前项目没有实现主题切换入口，所以不要写成“已支持应用内主题切换”。真实情况是：项目保留了颜色模式设置位置，并配置了基础资源。

为什么这属于高端精致？✨

很多人理解“高端精致”时，会先想到大面积视觉设计。但在真实开发中，精致感首先来自一致性。

启动页如果是白屏闪一下，首页又突然切成深色，会显得割裂。启动背景、应用主题、首页背景如果能保持一致，用户感知会更自然。

当前项目中：

1. 启动背景走资源引用。
2. base 和 dark 分别定义颜色。
3. Ability 中有颜色模式配置入口。
4. 首页使用资源化字体大小。

这些都是向精致体验靠近的基础能力。

后续如何继续优化？🚀

基于当前项目，可以继续做以下优化：

1. 增加页面背景色资源。
2. 增加文本主色、辅助色资源。
3. 为暗色模式配置对应文本颜色。
4. 首页不要只依赖启动背景，而是使用完整页面背景。
5. 将卡片、导航栏、按钮颜色统一资源化。

例如后续可以把资源设计成：

page_background
text_primary
text_secondary
card_background
brand_primary
divider_color

这里只是资源命名建议，不是当前项目已有内容。

当前项目文章可写重点 ✅

为了保证真实性，写这篇文章时可以明确强调：

当前项目已经具备：

1. startWindowBackground 启动背景配置。
2. base 资源中的浅色启动背景。
3. dark 资源中的深色启动背景。
4. EntryAbility 中的颜色模式设置位置。

当前项目尚未完成：

1. 完整深色模式页面设计。
2. 应用内主题切换。
3. 多组件颜色 token 体系。
4. 沉浸式导航栏视觉。

这样写既真实，也能体现后续优化方向。

总结 🌈

这篇文章对应“四大主题”中的 高端精致。

当前项目虽然是基础应用，但已经有启动窗口背景、资源引用、明暗资源目录和颜色模式设置入口。它们不算炫技，却是应用视觉体验稳定的基础。

真正精致的 OpenHarmony 应用，不应该只在首页做视觉效果，也应该从启动瞬间开始保持一致。启动页、资源分层和主题策略，是用户感知体验的一部分。🌗

参考资料：

• HarmonyOS 官方文档：资源分类与资源引用
• HarmonyOS 官方文档：模块配置文件
• HarmonyOS 官方文档：应用颜色模式
• 当前项目文件：module.json5、color.json、EntryAbility.ets