?? ?平時開發時直接在模擬器上運行的，也沒有涉及主題相關的功能。換成真機運行時，發現很多頁面變成深色的了，原來是手機開啟了深色模式，沒有設置背景顏色的頁面會默認跟隨主題顏色，導致頁面顯示混亂。
?? ?但是暫時抽不出時間去適配深色模式，思考了一下鴻蒙中應該和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) //隱藏默認標題欄（返回按鈕、標題）
? }
}
