鸿蒙开发入门：如何适配深色模式之媒体篇

在鸿蒙应用的开发中，适配深色模式是一个常见的需求，可以保证用户在夜晚或光线不佳的地方开启深色模式后观看屏幕更加舒适，那么我们来看一下如何对媒体资源（例如背景图）进行适配。

首先在找到“src/main/resources/base/media”目录，这是正常模式下的媒体目录，并新建深色模式下的媒体目录“src/main/resources/dark/media”，然后准备两张正常模式和深色模式下的背景图“background.png”分别放到两个目录内，要保证名称相同，如下图所示：

我们直接新建页面来测试一下：

@Entry
@Component
struct TestDarkMode {
  @State message: string = '测试深色模式';

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontColor($r('app.color.title'))
        .fontWeight(FontWeight.Bold)
    }
    .backgroundImage($r('app.media.background')) //背景图片
    .backgroundImageSize(ImageSize.Cover)
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
    .height('100%')
    .width('100%')
  }
}

通过测试我们可以发现，只要准备同名的媒体文件，系统在切换深色模式后会自动加载dark下的背景图，不需要其他额外设置。 

设备分别关闭/开启深色模式，实际运行效果如下：