#HarmonyOS NEXT体验官#深色模式的适配 原创
当我们开发完app后，满心欢喜以为自己开发完了。但是从设置里将浅色模式改为深色模式后再进入自己的app，发现一切都变了。所以深色模式也是需要适配的。
浅色模式
深色模式
深色模式简单理解就是以前深色的字体，现在要改成浅色字体了。
简单粗暴的解决方式
app不跟随系统的模式，那么初始化的时候，直接主动给app设置浅色模式。
onWindowStageCreate(windowStage: window.WindowStage): void {
//设置浅色模式
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
}但如果想要体验好一点，跟随系统的模式，就稍微复杂一点了。
颜色适配，自定义两套颜色资源（resources/dark/element/color.json和resources/base/element/color.json），通过$r的方式加载颜色资源的key值。
//base/elememt/color.json 下的common_text色值
{
"name": "common_text",
"value": "#333333"
}
//dark/element/color.json 下的common_text色值
{
"name": "common_text",
"value": "#FFFFFF"
}系统资源的使用
此种写法，需要我们程序员自己来维护两套资源。当然如果不想维护，可以使用系统资源。开发者直接使用系统预置的资源定义（即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。也就是系统已经做好了适配，我们拿过来就用，不用管他在何种设备、何种模式。
预置资源查看：
https://gitee.com/openharmony/resources/tree/master/systemres/main/resources
这是系统帮我们做的深色适配的方案。如果我们想更个性化定制自己的UI，也可以自己根据当前模式来做不同的逻辑。
首先适配深色模式，我们需要知道当前系统到底是哪种模式？其次，在系统切换模式后，app如何立即知道并作出相应的反应。
获取当前系统的深浅模式：
import { common, ConfigurationConstant } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
aboutToAppear(): void {
let mode = this.context.config.colorMode
if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
//深色模式
} else {
//浅色模式
}
}
build() {
}
}监听深浅模式的实时变化：
EntryAbility.ets下监听
onWindowStageCreate(windowStage: window.WindowStage): void {
//添加订阅
this.context.getApplicationContext().on('environment',this.envCallback);
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}
/**
* 切换模式后的回调
*/
envCallback: EnvironmentCallback = {
onConfigurationUpdated(config) {
console.info(`envCallback onConfigurationUpdated success: ${JSON.stringify(config)}`);
let mode = config.colorMode;
if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
emitter.emit("colorModeChange")//发送消息模式改变
//深色模式
} else {
//浅色模式
}
},
onMemoryLevel(level){
console.log(`onMemoryLevel level: ${JSON.stringify(level)}`);
}
};
import { common, ConfigurationConstant } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext
aboutToAppear(): void {
let mode = this.context.config.colorMode
if (mode == ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
//深色模式
} else {
//浅色模式
}
emitter.on("colorModeChange", () => {
//模式发生变化，UI做出相应变化
})
}
build() {
}
}另外一种获取深浅色模式的方法
Environment.envProp("colorMode",ColorMode.DARK)// 将设备的显示模式存入AppStorage
@Entry
@Component
struct Index {
@StorageProp("colorMode") mode:ColorMode = ColorMode.DARK//通过@StorageProp获取到当前手机的显示模式
aboutToAppear(): void {
if (this.mode==ColorMode.DARK) {
//深色模式
}else {
//浅色模式
}
}
build() {
Column() {
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}另外一种深浅模式监听方法（媒体查询）
import mediaQuery from '@ohos.mediaquery'
@Entry
@Component
struct Index {
listener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync('(dark-mode: true)');
aboutToAppear(): void {
// 绑定回调函数
this.listener.on('change', (mediaQueryResult: mediaQuery.MediaQueryResult) => {
if (mediaQueryResult.matches) {
//深色模式
}else{
//浅色模式
}
});
}
build() {
Column() {
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
最近在做深色模式，学到了