中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
Web组件支持对前端页面进行深色模式配置。
通过darkMode()接口可以配置不同的深色模式,WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式,并且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式,并且深色模式跟随系统。 在下面的示例中, 通过darkMode()接口将页面深色模式配置为跟随系统。
// xxx.ets import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); @State mode: WebDarkMode = WebDarkMode.Auto; build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .darkMode(this.mode) } } } 通过forceDarkAccess()接口可将前端页面强制配置深色模式,且深色模式不跟随前端页面和系统。配置该模式时候,需要将深色模式配置成WebDarkMode.On。 在下面的示例中, 通过forceDarkAccess()接口将页面强制配置为深色模式。 // xxx.ets 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.example.com', controller: this.controller }) .darkMode(this.mode) .forceDarkAccess(this.access) } } }
本文参考引用HarmonyOS官方开发文档,基于API9。
微信扫码分享