harmony 鸿蒙Setting the Dark Mode

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

Setting the Dark Mode

The Web component allows you to set the dark mode for frontend pages.

  • Call darkMode() to configure an expected dark mode. WebDarkMode.Off indicates that the dark mode is disabled. WebDarkMode.On indicates that the dark mode is enabled and its setting follows the frontend page. WebDarkMode.Auto indicates that the dark mode is enabled and its setting follows the system. In the following example, the dark mode setting is configured to follow the system by using 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)
        }
      }
    }
    
  • Call forceDarkAccess() to forcibly set the dark mode for the frontend page and configure its setting not to follow the frontend page or system. In this mode, you need to specify WebDarkMode.On when calling darkMode(). In the following example, forceDarkAccess() is used to forcibly set the dark mode for the frontend page.

    // 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 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Web Component Overview

harmony 鸿蒙Managing Cookies and Data Storage

harmony 鸿蒙Debugging Frontend Pages by Using DevTools

harmony 鸿蒙Uploading Files

harmony 鸿蒙Managing Location Permissions

harmony 鸿蒙Invoking Frontend Page Functions on the Application

harmony 鸿蒙Invoking Application Functions on the Frontend Page

harmony 鸿蒙Opening Pages in a New Window

0  赞