Android WebView深色模式下拼写检查器背景颜色异常问题

问题描述 #

在Android WebView使用深色模式时，拼写检查器（文本建议弹窗）出现显示异常：

• 浅色主题：弹窗为白色背景搭配黑色文本，显示正常
• 深色主题：弹窗背景保持白色，但文本变为白色，导致内容完全不可读

效果对比 #

解决方案 #

1. 配置WebView的深色模式适配 #

通过WebSettings强制WebView跟随系统深色模式，同时配置输入连接的IME深色模式：

WebSettings webSettings = webView.getSettings();
// 跟随系统自动切换深色/浅色模式（Android 10+）
webSettings.setForceDark(WebSettings.FORCE_DARK_AUTO);
// 若需强制深色模式，使用FORCE_DARK_ON

// 自定义输入连接，适配拼写检查器深色样式
webView.setWebViewClient(new WebViewClient() {
    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {
        InputConnection connection = super.onCreateInputConnection(outAttrs);
        if (connection != null && Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            // 强制IME使用深色模式
            outAttrs.imeOptions |= EditorInfo.IME_FLAG_FORCE_DARK;
        }
        return connection;
    }
});

2. 为Web页面添加深色模式CSS适配 #

如果Web页面未适配深色模式，可能间接导致拼写检查器样式异常，在页面中添加深色模式样式：

@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #fff;
    }
    input, textarea {
        background-color: #333;
        color: #fff;
        border-color: #555;
    }
}

3. 检查系统拼写检查器设置 #

部分设备的系统拼写检查器可能存在适配问题：

• 进入系统「设置 → 语言和输入法 → 拼写检查器」，确认是否开启深色模式适配
• 更新系统输入法或拼写检查器应用至最新版本

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