1# Setting the Dark Mode
2
3
4The **Web** component allows you to set the dark mode for frontend pages.
5
6- Call [darkMode()](../reference/apis-arkweb/ts-basic-components-web.md#darkmode9) to configure an expected dark mode, which is disabled by default. When it is enabled, the **Web** component enables the dark theme defined for web pages if the theme has been defined in **prefers-color-scheme** of a media query, and remains unchanged otherwise. To forcibly enable the dark mode, you are advised to use this API with [forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9). [WebDarkMode.Off](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is disabled. [WebDarkMode.On](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is enabled and its setting follows the frontend page. [WebDarkMode.Auto](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9) indicates that the dark mode is enabled and its setting follows the system.
7    In the following example, the dark mode setting is configured to follow the system by using [darkMode()](../reference/apis-arkweb/ts-basic-components-web.md#darkmode9).
8
9    ```ts
10    // xxx.ets
11    import { webview } from '@kit.ArkWeb';
12
13    @Entry
14    @Component
15    struct WebComponent {
16      controller: webview.WebviewController = new webview.WebviewController();
17      @State mode: WebDarkMode = WebDarkMode.Auto;
18
19      build() {
20        Column() {
21          Web({ src: $rawfile('index.html'), controller: this.controller })
22            .darkMode(this.mode)
23        }
24      }
25    }
26    ```
27
28
29- Call [forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9) to forcibly set the dark mode for the frontend page. The color may be not converted as expected in forcible dark mode and its setting does not follow the frontend page or system. In this mode, you need to specify **WebDarkMode.On** when calling **darkMode()**.
30    In the following example, [forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9) is used to forcibly set the dark mode for the frontend page.
31
32    ```ts
33    // xxx.ets
34    import { webview } from '@kit.ArkWeb';
35
36    @Entry
37    @Component
38    struct WebComponent {
39      controller: webview.WebviewController = new webview.WebviewController();
40      @State mode: WebDarkMode = WebDarkMode.On;
41      @State access: boolean = true;
42
43      build() {
44        Column() {
45          Web({ src: $rawfile('index.html'), controller: this.controller })
46            .darkMode(this.mode)
47            .forceDarkAccess(this.access)
48        }
49      }
50    }
51    ```
52
53- Code of the **index.html** page:
54
55  ```html
56  <!-- index.html -->
57  <!DOCTYPE html>
58  <html>
59  <head>
60      <meta name="viewport" content="width=device-width,
61                                      initial-scale=1.0,
62                                      maximum-scale=1.0,
63                                      user-scalable=no">
64      <style type="text/css">
65          @media (prefers-color-scheme: dark) {
66              .contentCss{ background:  #000000; color: white; }
67              .hrefCss{ color: #317AF7; }
68          }
69      </style>
70  </head>
71  <body class="contentCss">
72  <div style="text-align:center">
73      <p>Dark mode debug page</p>
74  </div>
75  </body>
76  </html>
77  ```
78