• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Setting the Dark Mode
2
3
4The **Web** component allows you to set the dark mode for frontend pages.
5
6
7- Call [darkMode()](../reference/arkui-ts/ts-basic-components-web.md#darkmode9) to configure an expected dark mode.
8
9    [WebDarkMode.Off](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is disabled. [WebDarkMode.On](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is enabled and its setting follows the frontend page. [WebDarkMode.Auto](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is enabled and its setting follows the system.
10
11    In the following example, the dark mode setting is configured to follow the system by using [darkMode()](../reference/arkui-ts/ts-basic-components-web.md#darkmode9).
12
13    ```ts
14    // xxx.ets
15    import web_webview from '@ohos.web.webview';
16
17    @Entry
18    @Component
19    struct WebComponent {
20      controller: web_webview.WebviewController = new web_webview.WebviewController();
21      @State mode: WebDarkMode = WebDarkMode.Auto;
22      build() {
23        Column() {
24          Web({ src: 'www.example.com', controller: this.controller })
25            .darkMode(this.mode)
26        }
27      }
28    }
29    ```
30
31
32- Call [forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9) to forcibly set the dark mode for the frontend page and configure the dark mode not to follow the frontend page or system setting.
33
34    In this mode, you need to specify **WebDarkMode.On** when calling **darkMode()**.
35
36    In the following example, [forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9) is used to forcibly set the dark mode for the frontend page.
37
38    ```ts
39    // xxx.ets
40    import web_webview from '@ohos.web.webview';
41
42    @Entry
43    @Component
44    struct WebComponent {
45      controller: web_webview.WebviewController = new web_webview.WebviewController();
46      @State mode: WebDarkMode = WebDarkMode.On;
47      @State access: boolean = true;
48      build() {
49        Column() {
50          Web({ src: 'www.example.com', controller: this.controller })
51            .darkMode(this.mode)
52            .forceDarkAccess(this.access)
53        }
54      }
55    }
56    ```
57