鸿蒙 App 也能一键切换深浅色？用 ArkTS 教你轻松实现！

摘要

在如今用户体验不断提升的趋势下，"夜间模式" 和 "浅色主题" 几乎已经成了应用的标配。HarmonyOS 提供的 ArkTS 框架为我们实现主题切换提供了灵活的技术支持。不管你是想做一个高端的 UI 控件风格，还是想让用户自己切换喜欢的主题风格，这篇文章都可以帮你快速搞定 ArkTS 中的动态主题切换实现方式。

引言

在日常使用中，我们经常会遇到这样一个场景：白天使用浅色主题，晚上切换为深色模式，保护眼睛，避免疲劳。而这类"动态主题切换"功能已经逐渐成为应用的基本需求。

在 ArkTS 中，我们可以通过灵活地定义主题资源，再加上一点点切换逻辑，就能很容易构建出一个支持主题切换的完整体验。接下来，我们就一步步实现这个功能，并结合实际项目中可能遇到的问题做详细分析。

ArkTS 中实现动态主题切换的完整流程

定义多个主题资源

我们首先需要在资源文件夹中分别定义深色和浅色的主题，比如 themes/light_theme.json 和 themes/dark_theme.json：

light_theme.json

json 复制代码

{
  "theme": {
    "backgroundColor": "#FFFFFF",
    "textColor": "#000000",
    "buttonColor": "#4285F4"
  }
}

dark_theme.json

json 复制代码

{
  "theme": {
    "backgroundColor": "#000000",
    "textColor": "#FFFFFF",
    "buttonColor": "#90CAF9"
  }
}

在页面中使用主题变量

我们在页面代码中引用这些主题属性：

ts 复制代码

@Entry
@Component
struct HomePage {
  @State themeStyle: Resource = $r('app.theme.light_theme')

  build() {
    Column({ space: 20 }) {
      Text('欢迎使用动态主题应用')
        .fontSize(20)
        .fontColor(this.themeStyle.theme.textColor)
        .padding(16)

      Button('切换主题', () => {
        this.switchTheme()
      })
      .backgroundColor(this.themeStyle.theme.buttonColor)
      .fontColor(this.themeStyle.theme.textColor)
      .padding(16)
    }
    .backgroundColor(this.themeStyle.theme.backgroundColor)
    .height('100%')
  }

  switchTheme() {
    if (this.themeStyle === $r('app.theme.light_theme')) {
      this.themeStyle = $r('app.theme.dark_theme')
      // 保存当前主题设置
      AppStorage.set<string>('appTheme', 'dark')
    } else {
      this.themeStyle = $r('app.theme.light_theme')
      AppStorage.set<string>('appTheme', 'light')
    }
  }

  aboutToAppear() {
    const savedTheme = AppStorage.get<string>('appTheme') ?? 'light'
    this.themeStyle = savedTheme === 'dark' ? $r('app.theme.dark_theme') : $r('app.theme.light_theme')
  }
}

实际场景中的应用举例

应用场景一：电商 App 中的夜间模式

代码片段

ts 复制代码

Text('推荐商品')
  .fontSize(18)
  .fontColor(this.themeStyle.theme.textColor)
  .padding(8)

List() {
  ListItem() {
    Row() {
      Image($r('app.media.product1')).width(80).height(80)
      Column() {
        Text('商品名称')
          .fontColor(this.themeStyle.theme.textColor)
        Text('￥99')
          .fontColor(this.themeStyle.theme.textColor)
      }
    }
  }
}
.backgroundColor(this.themeStyle.theme.backgroundColor)

应用说明

很多用户习惯晚上逛电商，深色模式不刺眼，提升体验，也更易转化成交。

应用场景二：阅读类应用中的"护眼模式"

示例

ts 复制代码

Text('这是正文内容...')
  .fontSize(18)
  .fontColor(this.themeStyle.theme.textColor)
  .lineHeight(24)
  .padding(16)
  .backgroundColor(this.themeStyle.theme.backgroundColor)

应用说明

在小说类、新闻类阅读应用中，浅色背景在白天清晰，夜间则切换为护眼深色背景，用户可以长时间阅读不累。

应用场景三：系统工具类 App 的主题个性化设置

示例

ts 复制代码

@State userTheme: string = AppStorage.get<string>('appTheme') ?? 'light'

Button('主题偏好设置', () => {
  // 跳转到设置页，让用户选 dark/light/system
})

应用说明

有些 App 允许用户自定义系统主题，也可以跟随系统设置自动切换（可以监听系统亮度变化，进阶玩法）。

常见问题解答（QA）

Q1：主题切换会导致页面闪烁吗？

A：如果主题切换过程中没有重新渲染整个组件，而是通过 @State 控制变量更新，基本不会出现闪烁现象。

Q2：如何实现"跟随系统"的自动切换？

A：目前 ArkTS 中可以通过监听系统设置（比如亮度、颜色模式）来实现。未来系统版本可能支持更强的"自动同步"。

Q3：主题变量是否支持字体、边框等？

A：可以！你可以在主题中定义任何支持的样式字段，比如 fontSize、borderRadius 等，只要你在组件中正确引用就行。

总结

动态主题切换功能，在 ArkTS 中的实现其实并不复杂。我们只需要：

提前规划好样式结构
利用资源文件组织不同主题
通过 @State 动态切换主题引用
加上 AppStorage 保存设置，用户体验就更完整了

这个功能不仅提升了应用的用户体验，还可以作为一个很好的"用户粘性"工具点，尤其适合新闻类、社交类、工具类、影音类 App 等。

如果你正在开发一个需要主题切换功能的鸿蒙应用，现在你已经掌握了完整实现流程。可以把这套方案直接用在你的项目中，或者继续拓展出更多玩法，比如动画过渡、多主题、系统同步等。