HarmonyOS 开发深色模式适应性 - 情景 2：不跟随系统变化
最编程
2024-10-09 13:22:34
...
效果
应用固定使用某种颜色模式，不跟随系统颜色模式变化。
方案
1. 通过setColorMode设置应用的颜色模式
-
设置颜色模式：通过
setColorMode方法设置应用的颜色模式。 -
监听颜色模式变化：通过
onConfigurationOnUpdate监听颜色模式变化。
示例代码：
@Entry
@Component
struct TogglePage2 {
@State isDarkMode: boolean = false
build() {
Column() {
Toggle({ type: ToggleType.Switch, isOn: this.isDarkMode })
.onChange((isOn: boolean) => {
console.log('Toggle.onChange2： isOn', isOn)
this.isDarkMode = isOn
getContext(this).getApplicationContext().setColorMode(this.isDarkMode ? 0 : 1)
})
}.width("100%").height("100%").padding(32)
}
}2. Web组件通过darkMode和forceDarkAccess属性配置深色模式
-
设置Web组件的深色模式：通过
darkMode和forceDarkAccess属性配置Web组件的深色模式。
示例代码：
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State mode: WebDarkMode = WebDarkMode.On
@State access: boolean = true
build() {
Column() {
Web({ src: 'www.xxx.com', controller: this.controller })
.darkMode(this.mode)
.forceDarkAccess(this.access)
}
}
}