平时开发时直接在模拟器上运行的，也没有涉及主题相关的功能。换成真机运行时，发现很多页面变成深色的了，原来是手机开启了深色模式，没有设置背景颜色的页面会默认跟随主题颜色，导致页面显示混乱。
但是暂时抽不出时间去适配深色模式，思考了一下鸿蒙中应该和iOS一样有个开关可以直接屏蔽深色模式、强制使用浅色模式。
下面主要介绍：一键屏蔽深色模式、获取当前系统主题、监听系统主题变动、设置局部主题。
一、屏蔽深色模式
鸿蒙中是否和iOS一样可以直接屏蔽深色模式、强制使用浅色模式？
直接在 EntryAbility 的 onCreate 方法中实现以下代码就行了：
import { ConfigurationConstant } from '@kit.AbilityKit';
// 屏蔽深色模式 (COLOR_MODE_NOT_SET不设置 COLOR_MODE_DARK深色模式 COLOR_MODE_LIGHT浅色模式) this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)
二、atomicService
提供获取系统信息、系统设置等能力
1、获取系统信息（主题等）
* getSystemInfoSync（Sync）
包括：设备、网络状态、屏幕、语言、主题等系统信息
import { atomicService } from '@kit.ScenarioFusionKit';
// 1、获取设备信息（获取设备、网络状态、屏幕、语言、主题等系统信息）
getSystemInfo() {
//系统信息属性取值类型
let stateArray: Array<atomicService.SystemInfoType> =
['brand', 'deviceModel', 'screenWidth', 'screenHeight', 'language', 'osFullName', 'fontSizeSetting',
'sdkApiVersion', 'bluetoothEnabled', 'wifiEnabled', 'locationEnabled', 'deviceOrientation', 'theme']
try {
let data = atomicService.getSystemInfoSync(stateArray)
let brand: string | undefined = data.brand; //设备品牌名称
let deviceModel: string | undefined = data.deviceModel; //设备类型
let screenWidth: number | undefined = data.screenWidth; //屏幕的宽度
let screenHeight: number | undefined = data.screenHeight; //屏幕的高度
let language: string | undefined = data.language; //系统语言
let osFullName: string | undefined = data.osFullName; //系统版本
let fontSizeSetting: number | undefined = data.fontSizeSetting; //显示设备逻辑像素的密度
let sdkApiVersion: number | undefined = data.sdkApiVersion; //系统软件API版本
let bluetoothEnabled: boolean | undefined = data.bluetoothEnabled; //蓝牙
let wifiEnabled: boolean | undefined = data.wifiEnabled; //Wi-Fi
let locationEnabled: boolean | undefined = data.locationEnabled; //地理位置
let deviceOrientation: string | undefined = data.deviceOrientation; //设备方向
let theme: ColorMode | undefined = data.theme; //系统主题（深色、浅色模式）
} catch (error) {
}
}
* getSystemInfo（Promise）
包括：同上，使用Promise异步回调
//...
try {
atomicService.getSystemInfo(stateArray).then((data: atomicService.SystemInfo) => {
let theme: ColorMode | undefined = data.theme; //系统主题（深色、浅色模式）
//...
}).catch((error: BusinessError) => {
})
} catch (error) {
}
2、获取系统设置属性（拓展）
* getSystemSetting
包括：蓝牙、位置、Wi-Fi状态和设备方向信息
import { atomicService } from '@kit.ScenarioFusionKit';
// 2、获取系统设置属性，包括蓝牙、位置、Wi-Fi状态和设备方向信息
getSystemSetting() {
//系统设置属性取值类型
let stateArray: Array<atomicService.SystemSettingType> =
['bluetoothEnabled', 'locationEnabled', 'deviceOrientation', 'wifiEnabled']
try {
let data = atomicService.getSystemSetting(stateArray)
let bluetoothEnabled: boolean | undefined = data.bluetoothEnabled; //蓝牙
let locationEnabled: boolean | undefined = data.locationEnabled; //定位
let deviceOrientation: string | undefined = data.deviceOrientation; //设备方向
let wifiEnabled: boolean | undefined = data.wifiEnabled; //wifi
} catch (error) {
}
}
三、@ohos.app.ability.Configuration
监听系统主题变动（定义环境变化信息）
import { UIAbility, AbilityConstant, EnvironmentCallback, Want } from '@kit.AbilityKit';
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { //初始化
//监听（更新系统配置时会触发下方回调）
let envCallback: EnvironmentCallback = {
onConfigurationUpdated(config) {
//获取环境变化信息
let colorMode = config.colorMode; //表示深浅色模式，默认为浅色
let language = config.language; //应用程序的当前语言
let direction = config.direction; //屏幕方向
let screenDensity = config.screenDensity; //屏幕像素密度
let displayId = config.displayId; //物理屏幕ID
let hasPointerDevice = config.hasPointerDevice; //键鼠、触控板等是否连接
//let fontId = config.fontId; //当前系统字体的唯一ID
let fontSizeScale = config.fontSizeScale; //字体大小缩放比例
let fontWeightScale = config.fontWeightScale; //字体粗细缩放比例
let mcc = config.mcc; //移动设备国家代码
let mnc = config.mnc; //移动设备网络代码
},
onMemoryLevel(level) { //
console.log(`onMemoryLevel level: ${level}`);
}
};
//执行
try {
let applicationContext = this.context.getApplicationContext(); //获取上下文
let callbackId = applicationContext.on('environment', envCallback); //注册环境回调
} catch (paramError) {
}
}
}
四、WithTheme：设置局部主题
用于设置应用局部页面自定义主题风格，可设置子组件深浅色模式和自定义配色。
代码:
// 指定局部深浅色模式
@Component
export struct WithThemePage {
build() {
NavDestination() {
// 自定义公共导航栏
CommonNavBar({ title: 'WithTheme局部主题', showRightBt: true })
Column() {
// 系统默认
Column() {
Text('1')
Text('默认')
}
.padding(30)
.backgroundColor($r('sys.color.background_primary'))
// 设置组件为深色模式
WithTheme({ colorMode: ThemeColorMode.DARK }) {
Column() {
Text('2')
Text('深色模式')
}
.padding(30)
.backgroundColor($r('sys.color.background_primary'))
}
// 设置组件为浅色模式
WithTheme({ colorMode: ThemeColorMode.LIGHT }) {
Column() {
Text('3')
Text('浅色模式')
}
.padding(30)
.backgroundColor($r('sys.color.background_primary'))
}
}
}
.hideTitleBar(true) //隐藏默认标题栏（返回按钮、标题）
}
}
