Jetpack Compose中WebView深色模式适配问题（API33+）

问题场景 #

在minSdk=33、compileSdk=35的Jetpack Compose环境下，应用其他区域已实现白字黑底的深色模式，但WebView始终保持黑字白底，该问题在API33、34、35模拟器上均能复现。添加androidx.webkit:webkit:1.12.1依赖后，WebView虽切换到深色主题，但出现黑字黑底的显示问题，内容无法正常阅读。

关键疑问解答 #

关于文档中「若网页内容使用prefers-color-scheme且内容作者允许」的描述：

• 「内容作者允许」具体指什么：指网页通过添加特定meta标签，明确声明支持浅色/深色配色方案，允许系统根据当前主题自动切换。
• HTML配置方式：在网页<head>中添加：

  <meta name="color-scheme" content="light dark" />
  

• 默认状态：未添加该meta标签的网页，默认不允许系统自动切换配色方案，WebView不会主动应用深色模式。

解决步骤 #

1. 修正应用主题配置 #

原themes.xml使用浅色主题父类，导致WebView继承浅色主题，需修改为深色主题或让WebView继承应用的深色主题：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 改为深色主题父类，或直接使用应用的Material深色主题 -->
    <style name="Theme.DarkrWebView" parent="android:Theme.Material.NoActionBar"/>
</resources>

或者在Compose中创建WebView时，传入带有深色主题的Context：

val darkContext = ContextThemeWrapper(myContext, R.style.Theme_DarkrWebView)
val myWebView = remember { makeWebView(darkContext) }

2. 正确配置WebView参数 #

修改makeWebView函数，启用强制深色模式、算法深色化，并设置背景透明以避免黑字黑底：

fun makeWebView(
    context: Context,
): WebView {
    return WebView(context).apply {
        Log.d("~~~~~~", "Created WebView: ${this.hashCode().toHexString()}")
        setLayerType(View.LAYER_TYPE_SOFTWARE, null)

        // 设置背景透明，避免深色模式下背景与文字同色
        setBackgroundColor(Color.TRANSPARENT)

        settings.javaScriptEnabled = true
        settings.loadWithOverviewMode = true
        settings.useWideViewPort = true
        settings.setSupportZoom(true)

        // 允许算法自动深色化（针对未适配深色模式的第三方网页）
        settings.isAlgorithmicDarkeningAllowed = true
        // 强制开启深色模式
        if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
            WebSettingsCompat.setForceDark(settings, WebSettingsCompat.FORCE_DARK_ON)
        }

        loadData(htmlText, "text/html", "utf-8")
    }
}

注意：需使用WebSettingsCompat而非直接调用settings.forceDark，确保API兼容性（即使minSdk=33，用Compat类更稳妥）。

3. 适配自有HTML内容 #

如果是加载自有网页，添加color-schememeta标签，让网页主动支持深色模式：

val htmlText =
    "<html> <head>" +
            "<meta name=\"color-scheme\" content=\"light dark\" />" +
            "</head><body> <h1>Sample Document</h1> <h2>Level 2 Header</h2>" +
            "Foo bar baar baz qux quux <p/> Foo bar baar baz qux quux" +
            "</body></html>"

添加该标签后，网页会根据系统主题自动切换配色，无需依赖WebView的算法深色化。

4. 第三方网页适配 #

对于未适配深色模式的第三方网页，确保开启isAlgorithmicDarkeningAllowed = true和FORCE_DARK_ON，WebView会自动分析网页内容，反转颜色以适配深色模式，同时避免文字与背景同色。

为什么之前的配置无效？ #

• 原主题为浅色主题，WebView默认继承该主题，无法触发深色模式；
• 未添加androidx.webkit依赖时，forceDark相关API无法正常生效；
• 开启深色模式后未设置背景透明，导致WebView背景与文字颜色冲突，出现黑字黑底。

内容的提问来源于stack exchange，提问作者18446744073709551615