如何跟随系统深/浅色模式获取对应的资源文件
=====================

#### 问题现象

深色模式下获取dark目录下的资源，浅色模式下获取base目录下的资源。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/D20CDGIOSNmJDD2jYqQnGg/zh-cn_image_0000002628823000.png?HW-CC-KV=V1&HW-CC-Date=20260709T134136Z&HW-CC-Expire=86400&HW-CC-Sign=2D0C228C2A3BB4E048DFBCB59F64603274B62AED1A2D532D6DD304A2AF72D40B "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/66/v3/jEaM8_RUT1OKOmeEveab9g/zh-cn_image_0000002628663114.png?HW-CC-KV=V1&HW-CC-Date=20260709T134136Z&HW-CC-Expire=86400&HW-CC-Sign=4DC49F5ECDABABAB3B4F6C78B8443AC811FC0305F87F2B10DB7A6881B0332C09 "点击放大")

#### 背景知识

[resourceManager.getResourceManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-resource-manager#resourcemanagergetresourcemanager)获取的资源的配置（语言、深浅色、分辨率、横竖屏等）是由系统决定的，而通过[getOverrideResourceManager](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-resource-manager#getoverrideresourcemanager12)接口返回的对象，应用可以获取符合指定配置的资源，即差异化资源，比如在浅色模式时可以获取深色资源。

#### 解决方案

*   方式一：获取与系统配置相同的资源管理器。通过getOverrideResourceManager获取对应当前系统配置对应的资源管理对象，然后调用资源接口获取对应资源即可，例如：let overrideResMgr = context.resourceManager.getOverrideResourceManager();。
*   方式二：获取指定配置的资源管理器。
    1.  通过getOverrideConfiguration获取配置：let config = context.resourceManager.getOverrideConfiguration()。
    2.  修改对应参数：config.colorMode = resourceManager.ColorMode.DARK。
    3.  将配置传入getOverrideResourceManager，获取指定配置下的资源管理器：let overrideResMgr = context.resourceManager.getOverrideResourceManager(config)。

根据系统配置获取对应图片并绘制到界面，示例代码如下：

import { ConfigurationConstant, Context } from '@kit.AbilityKit';
import { image } from '@kit.ImageKit';

export class Point {
  x: number \= 0;
  y: number \= 0;

  set(x: number, y: number) {
    this.x \= x;
    this.y \= y;
  }
}

@Entry
@Component
struct GetResource {
  private settings: RenderingContextSettings \= new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D \= new CanvasRenderingContext2D(this.settings);
  hostContext \= this.getUIContext().getHostContext()?.getApplicationContext();
  isDarkMode: boolean \= false;
  mCircleBg: image.PixelMap | undefined \= undefined;
  centerPoint \= new Point();

 _ // 获取资源并转化为PixelMap_
  image2PixelMap(context: Context, resource: Resource) {
 _   // 获取对应系统颜色模式配置下的资源管理器_
    let overrideResMgr \= context.resourceManager.getOverrideResourceManager();
    let data \= overrideResMgr.getMediaContentSync(resource.id);

    let arrayBuffer \= data.buffer.slice(data.byteOffset, data.byteLength \+ data.byteOffset);
    let imageSource: image.ImageSource \= image.createImageSource(arrayBuffer);
    let value \= imageSource.getImageInfoSync();
    let opts: image.DecodingOptions \= {
      editable: true,
      desiredSize: {
        height: value.size.height,
        width: value.size.width
      }
    };
    return imageSource.createPixelMapSync(opts);
  }

  _// 清除并绘制图片_
  draw() {
    this.mCircleBg \= this.image2PixelMap(this.hostContext as Context, $r('app.media.theme\_joystick\_big\_circle\_bg'));
    this.context.clearRect(\-this.centerPoint.x, -this.centerPoint.y, this.centerPoint.x \* 2, this.centerPoint.y \* 2);
    let innerR \= 150;
    this.context.drawImage(this.mCircleBg, -innerR, -innerR, innerR \* 2, innerR \* 2);
  }

  build() {
    Column() {
      Text('适配颜色(点我切换)')
        .fontColor($r('app.color.text\_primary'))
        .fontSize(24)
        .margin({ top: 100 })
        .onClick(() \=\> {
          if (this.isDarkMode) {
            this.hostContext?.setColorMode(ConfigurationConstant.ColorMode.COLOR\_MODE\_LIGHT);
            this.isDarkMode \= false;
            this.draw();
          } else {
            this.hostContext?.setColorMode(ConfigurationConstant.ColorMode.COLOR\_MODE\_DARK);
            this.isDarkMode \= true;
            this.draw();
          }
        })
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onReady(() \=\> {
            let measuredWidth \= this.context.width;
            let measuredHeight \= this.context.height;
            this.centerPoint.set(measuredWidth / 2, measuredHeight / 2);
            this.context.clearRect(\-this.centerPoint.x, -this.centerPoint.y, this.centerPoint.x \* 2,
              this.centerPoint.y \* 2);
            this.context.translate(this.centerPoint.x, this.centerPoint.y);
            this.draw();
          })
      }
      .width('100%')
      .height('auto')
    }
    .height('100%')
    .padding({ left: 16, right: 16 })
    .width('100%')
    .backgroundColor($r('app.color.bg\_primary'))
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\])
  }
}

#### 常见FAQ

Q：为什么context.resourceManager只能获取LIGHT模式下的资源？

A：当前接口获取系统资源管理ResourceManager对象中的Configuration为默认值，颜色模式默认是LIGHT。