鸿蒙NEXT版实战开发：ArkWeb设置基本属性和事件（设置深色模式）

那只斑马不睡觉

于 2024-10-07 15:07:22 发布

阅读量600

点赞数 5

分类专栏：鸿蒙5.0 ArkUI ArkWeb 文章标签： harmonyos 华为华为od 驱动开发 ArkUI ArkWeb 前端

本文链接：https://blog.csdn.net/qq_39652397/article/details/142740817

版权

鸿蒙5.0 同时被 3 个专栏收录

89 篇文章 0 订阅

订阅专栏

ArkUI

84 篇文章 0 订阅

订阅专栏

ArkWeb

7 篇文章 0 订阅

订阅专栏

往期鸿蒙全套实战精彩文章必看内容：

设置深色模式

Web组件支持对前端页面进行深色模式配置。

通过darkMode()接口可以配置不同的深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合forceDarkAccess()使用。WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式，并且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式，并且深色模式跟随系统。

在下面的示例中，通过darkMode()接口将页面深色模式配置为跟随系统。
```
// xxx.ets
import { webview } from '@kit.ArkWeb';
  
@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.Auto;

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .darkMode(this.mode)
    }
  }
}
```

通过forceDarkAccess()接口可将前端页面强制配置深色模式，强制深色模式无法保证所有颜色转换符合预期，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。

在下面的示例中，通过forceDarkAccess()接口将页面强制配置为深色模式。

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry        
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.On;
  @State access: boolean = true;

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

index.html页面代码。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,
                                    initial-scale=1.0,
                                    maximum-scale=1.0,
                                    user-scalable=no">
    <style type="text/css">
        @media (prefers-color-scheme: dark) {
            .contentCss{ background:  #000000; color: white; }
            .hrefCss{ color: #317AF7; }
        }
    </style>
</head>
<body class="contentCss">
<div style="text-align:center">
    <p>Dark mode debug page</p>
</div>
</body>
</html>