harmony 鸿蒙设置深色模式

  • 2023-06-24
  • 浏览 (921)

设置深色模式

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)
        }
      }
    }
    

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Web

harmony 鸿蒙建立应用侧与前端页面数据通道

harmony 鸿蒙Web组件概述

harmony 鸿蒙管理Cookie及数据存储

harmony 鸿蒙使用Devtools工具调试前端页面

harmony 鸿蒙上传文件

harmony 鸿蒙管理位置权限

harmony 鸿蒙应用侧调用前端页面函数

harmony 鸿蒙前端页面调用应用侧函数

harmony 鸿蒙在新窗口中打开页面

0  赞