Android WebView注入JS修改网页背景色与文字色实现深色主题问题

这问题我之前踩过不少坑！只修改document.body的样式确实只能覆盖一小部分网站，因为很多站点会给具体的HTML元素（比如<p>、<div>、<span>）单独设置颜色，或者用优先级更高的CSS选择器（比如类选择器、ID选择器）直接覆盖body的继承样式。下面给你几个亲测有效的方案：

1. 确保JS注入的时机正确 #

很多时候样式不生效是因为页面还没完全加载就执行了注入代码，DOM元素还没渲染出来。一定要在WebView的onPageFinished回调里执行JS注入：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 页面加载完成后再注入深色模式JS
        view.evaluateJavascript(getDarkModeScript(), null);
    }
});

// 封装JS脚本的方法
private String getDarkModeScript() {
    return "(function() { /* 这里放下面的JS代码 */ })()";
}

2. 使用全局样式表强制覆盖所有元素 #

不要只改body，直接插入全局样式表，用!important强制覆盖优先级更高的样式，同时排除不需要修改的元素（比如图片、视频）：

(function() {
    // 创建一个全局样式标签
    const darkStyle = document.createElement('style');
    darkStyle.innerHTML = `
        /* 覆盖所有元素的文字和背景色 */
        * {
            color: #ffffff !important;
            background-color: #121212 !important;
        }
        /* 单独处理链接颜色，避免和普通文字混淆 */
        a {
            color: #64b5f6 !important;
        }
        /* 图片、视频不需要背景色，设为透明 */
        img, video, iframe {
            background-color: transparent !important;
        }
        /* 表单元素单独优化，提升可读性 */
        input, textarea, select, button {
            background-color: #1e1e1e !important;
            color: #ffffff !important;
            border-color: #333333 !important;
        }
        /* 处理一些网站用的CSS变量，兼容主题切换 */
        :root {
            --text-primary: #ffffff !important;
            --bg-primary: #121212 !important;
        }
    `;
    // 把样式表插入到页面头部
    document.head.appendChild(darkStyle);
})()

这个方法的优势是：样式表的优先级比直接修改元素style更高，能覆盖绝大多数内联样式和自定义类样式。

3. 处理动态加载的内容 #

很多网站用懒加载、AJAX异步加载内容（比如滚动加载的列表），这些内容在onPageFinished之后才会渲染，上面的样式可能覆盖不到。这时候可以用MutationObserver监听DOM变化，确保新添加的元素也能应用深色样式：

(function() {
    // 先添加全局样式（和上面的代码一样）
    const darkStyle = document.createElement('style');
    darkStyle.innerHTML = `
        * { color: #ffffff !important; background-color: #121212 !important; }
        a { color: #64b5f6 !important; }
        img, video, iframe { background-color: transparent !important; }
        input, textarea, select, button { background-color: #1e1e1e !important; color: #ffffff !important; border-color: #333333 !important; }
        :root { --text-primary: #ffffff !important; --bg-primary: #121212 !important; }
    `;
    document.head.appendChild(darkStyle);

    // 监听DOM树变化，处理动态添加的元素
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length > 0) {
                // 这里不需要额外修改样式，因为全局样式已经会自动覆盖新元素
                // 如果有特殊元素需要单独处理，可以在这里写逻辑
            }
        });
    });

    // 监听body及其所有子元素的变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})()

4. 结合Android原生深色模式（可选） #

Android 10（API 29）及以上提供了系统级的WebView深色模式支持，比JS注入更原生，兼容性更好：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    WebSettings webSettings = webView.getSettings();
    // 强制开启深色模式
    webSettings.setForceDark(WebSettings.FORCE_DARK_ON);
    // 选择深色模式策略：优先使用网站的深色主题，没有则自动转深色
    webSettings.setForceDarkStrategy(WebSettings.FORCE_DARK_STRATEGY_WEB_THEME_DARKENING);
}

这个方法适合不想写复杂JS的场景，缺点是对某些布局复杂的网站，自动转换的效果可能不如自定义JS精细，可以和JS注入结合使用。

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