1e41f4b71Sopenharmony_ci# Setting the Dark Mode 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ciThe **\<Web>** component allows you to set the dark mode for frontend pages. 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ci- 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. 7e41f4b71Sopenharmony_ci 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). 8e41f4b71Sopenharmony_ci 9e41f4b71Sopenharmony_ci ```ts 10e41f4b71Sopenharmony_ci // xxx.ets 11e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ci @Entry 14e41f4b71Sopenharmony_ci @Component 15e41f4b71Sopenharmony_ci struct WebComponent { 16e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 17e41f4b71Sopenharmony_ci @State mode: WebDarkMode = WebDarkMode.Auto; 18e41f4b71Sopenharmony_ci 19e41f4b71Sopenharmony_ci build() { 20e41f4b71Sopenharmony_ci Column() { 21e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 22e41f4b71Sopenharmony_ci .darkMode(this.mode) 23e41f4b71Sopenharmony_ci } 24e41f4b71Sopenharmony_ci } 25e41f4b71Sopenharmony_ci } 26e41f4b71Sopenharmony_ci ``` 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ci 29e41f4b71Sopenharmony_ci- 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()**. 30e41f4b71Sopenharmony_ci 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. 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ci ```ts 33e41f4b71Sopenharmony_ci // xxx.ets 34e41f4b71Sopenharmony_ci import { webview } from '@kit.ArkWeb'; 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ci @Entry 37e41f4b71Sopenharmony_ci @Component 38e41f4b71Sopenharmony_ci struct WebComponent { 39e41f4b71Sopenharmony_ci controller: webview.WebviewController = new webview.WebviewController(); 40e41f4b71Sopenharmony_ci @State mode: WebDarkMode = WebDarkMode.On; 41e41f4b71Sopenharmony_ci @State access: boolean = true; 42e41f4b71Sopenharmony_ci 43e41f4b71Sopenharmony_ci build() { 44e41f4b71Sopenharmony_ci Column() { 45e41f4b71Sopenharmony_ci Web({ src: $rawfile('index.html'), controller: this.controller }) 46e41f4b71Sopenharmony_ci .darkMode(this.mode) 47e41f4b71Sopenharmony_ci .forceDarkAccess(this.access) 48e41f4b71Sopenharmony_ci } 49e41f4b71Sopenharmony_ci } 50e41f4b71Sopenharmony_ci } 51e41f4b71Sopenharmony_ci ``` 52e41f4b71Sopenharmony_ci 53e41f4b71Sopenharmony_ci- Code of the **index.html** page: 54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci ```html 56e41f4b71Sopenharmony_ci <!-- index.html --> 57e41f4b71Sopenharmony_ci <!DOCTYPE html> 58e41f4b71Sopenharmony_ci <html> 59e41f4b71Sopenharmony_ci <head> 60e41f4b71Sopenharmony_ci <meta name="viewport" content="width=device-width, 61e41f4b71Sopenharmony_ci initial-scale=1.0, 62e41f4b71Sopenharmony_ci maximum-scale=1.0, 63e41f4b71Sopenharmony_ci user-scalable=no"> 64e41f4b71Sopenharmony_ci <style type="text/css"> 65e41f4b71Sopenharmony_ci @media (prefers-color-scheme: dark) { 66e41f4b71Sopenharmony_ci .contentCss{ background: #000000; color: white; } 67e41f4b71Sopenharmony_ci .hrefCss{ color: #317AF7; } 68e41f4b71Sopenharmony_ci } 69e41f4b71Sopenharmony_ci </style> 70e41f4b71Sopenharmony_ci </head> 71e41f4b71Sopenharmony_ci <body class="contentCss"> 72e41f4b71Sopenharmony_ci <div style="text-align:center"> 73e41f4b71Sopenharmony_ci <p>Dark mode debug page</p> 74e41f4b71Sopenharmony_ci </div> 75e41f4b71Sopenharmony_ci </body> 76e41f4b71Sopenharmony_ci </html> 77e41f4b71Sopenharmony_ci ``` 78