1# 设置深色模式
2
3
4Web组件支持对前端页面进行深色模式配置。
5
6- 通过[darkMode()](../reference/apis-arkweb/ts-basic-components-web.md#darkmode9)接口可以配置不同的深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合[forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9)使用。[WebDarkMode.Off](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9枚举说明)模式表示关闭深色模式。[WebDarkMode.On](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9枚举说明)表示开启深色模式，并且深色模式跟随前端页面。[WebDarkMode.Auto](../reference/apis-arkweb/ts-basic-components-web.md#webdarkmode9枚举说明)表示开启深色模式，并且深色模式跟随系统。
7    在下面的示例中，通过[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- 通过[forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9)接口可将前端页面强制配置深色模式，强制深色模式无法保证所有颜色转换符合预期，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。
30    在下面的示例中，通过[forceDarkAccess()](../reference/apis-arkweb/ts-basic-components-web.md#forcedarkaccess9)接口将页面强制配置为深色模式。
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- index.html页面代码。
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