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. [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. 8 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). 9 10 ```ts 11 // xxx.ets 12 import web_webview from '@ohos.web.webview'; 13 14 @Entry 15 @Component 16 struct WebComponent { 17 controller: web_webview.WebviewController = new web_webview.WebviewController(); 18 @State mode: WebDarkMode = WebDarkMode.Auto; 19 build() { 20 Column() { 21 Web({ src: 'www.example.com', controller: this.controller }) 22 .darkMode(this.mode) 23 } 24 } 25 } 26 ``` 27 28 29- Call [forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9) 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()**. 30 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. 31 32 ```ts 33 // xxx.ets 34 import web_webview from '@ohos.web.webview'; 35 36 @Entry 37 @Component 38 struct WebComponent { 39 controller: web_webview.WebviewController = new web_webview.WebviewController(); 40 @State mode: WebDarkMode = WebDarkMode.On; 41 @State access: boolean = true; 42 build() { 43 Column() { 44 Web({ src: 'www.example.com', controller: this.controller }) 45 .darkMode(this.mode) 46 .forceDarkAccess(this.access) 47 } 48 } 49 } 50 ``` 51