1# 设置深色模式 2 3 4Web组件支持对前端页面进行深色模式配置。 5 6 7- 通过[darkMode()](../reference/arkui-ts/ts-basic-components-web.md#darkmode9)接口可以配置不同的深色模式，[WebDarkMode.Off](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9)模式表示关闭深色模式。[WebDarkMode.On](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9)表示开启深色模式，并且深色模式跟随前端页面。[WebDarkMode.Auto](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9)表示开启深色模式，并且深色模式跟随系统。 8 在下面的示例中, 通过[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- 通过[forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9)接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。 30 在下面的示例中, 通过[forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9)接口将页面强制配置为深色模式。 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