AndroidView Jetpack Compose中WebView深色主题失效求助

以下是几个针对性的排查和修复方案，按优先级尝试：

1. 替换算法深色为强制深色模式 #

ALGORITHMIC_DARKENING 依赖网页内容自动转换深色，兼容性和效果不稳定，换成强制深色模式更可靠：

@Composable
fun Webview() {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()
    
    AndroidView(
        factory = {
            RichEditor(context).apply {
                setEditorHeight(40)
                setPadding(10, 10, 10, 10)
                loadCSS("file:///android_asset/style.css")
                
                // 改用强制深色模式
                if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
                    WebSettingsCompat.setForceDark(settings, WebSettingsCompat.FORCE_DARK_ON)
                }
                
                setOnTextChangeListener {
                    scope.launch {
                        // 你的业务逻辑
                    }
                }
            }
        },
        update = {
            // 可在此处根据主题变化更新设置
        },
    )
}

2. 确保自定义CSS支持深色模式 #

你加载的style.css可能未适配深色模式，导致覆盖WebView的深色转换规则。在CSS中添加深色模式适配：

/* 浅色模式基础样式 */
body {
    background: #ffffff;
    color: #000000;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    body {
        background: #121212;
        color: #ffffff;
    }
    /* 针对RichEditor的编辑区域、工具栏等元素补充深色样式 */
}

3. 验证上下文与应用主题的一致性 #

确保App主题启用了深色模式切换能力，在res/values/styles.xml中配置：

<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- 其他主题属性配置 -->
</style>

同时，AndroidView的factory要使用LocalContext.current（关联当前Compose主题的上下文），避免用ApplicationContext（不带主题信息）。

4. 绑定主题变化实时更新RichEditor #

可以监听Compose的系统主题状态，实时同步到RichEditor：

@Composable
fun Webview() {
    val context = LocalContext.current
    val scope = rememberCoroutineScope()
    val isSystemDark = isSystemInDarkTheme()
    
    AndroidView(
        factory = {
            RichEditor(context).apply {
                setEditorHeight(40)
                setPadding(10, 10, 10, 10)
                loadCSS("file:///android_asset/style.css")
            }
        },
        update = { editor ->
            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
                val forceDarkMode = if (isSystemDark) {
                    WebSettingsCompat.FORCE_DARK_ON
                } else {
                    WebSettingsCompat.FORCE_DARK_OFF
                }
                WebSettingsCompat.setForceDark(editor.settings, forceDarkMode)
                // 刷新页面使设置生效
                editor.reload()
            }
        },
    )
}

额外提示 #

• 部分低版本WebView可能不支持FORCE_DARK，可添加Android 10+的版本判断。
• 如果RichEditor自带默认CSS，需要通过自定义CSS覆盖它的默认背景、文字颜色等属性。

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