设置深色模式

说明:

当前为Beta阶段。

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

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

    在下面的示例中,通过darkMode()接口将页面深色模式配置为跟随系统。

    // index.cj
    import ohos.web.webview.WebviewController
    import kit.ArkUI.{Web, WebDarkMode}
    import ohos.arkui.state_macro_manage.rawfile
    
    @Entry
    @Component
    class EntryView {
        let webController = WebviewController()
    
        func build() {
            Column {
                Web(src: @rawfile("index.html"), controller: webController)
                    .darkMode(WebDarkMode.Auto)
            }
        }
    }
    
  • 通过forceDarkAccess()接口可将前端页面强制配置为深色模式。强制深色模式无法保证所有颜色转换符合预期,且深色模式不跟随前端页面与系统。配置该模式时,需要将深色模式设置为WebDarkMode.On

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

    // index.cj
    import ohos.web.webview.WebviewController
    import kit.ArkUI.{Web, WebDarkMode}
    import ohos.arkui.state_macro_manage.rawfile
    
    @Entry
    @Component
    class EntryView {
        let webController = WebviewController()
    
        func build() {
            Column {
                Web(src: @rawfile("index.html"), controller: webController)
                    .darkMode(WebDarkMode.On)
                    .forceDarkAccess(true)
            }
        }
    }
    
  • index.html页面代码:

    <!-- resources/rawfile/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>