Android WebView 深色模式适配方案总结

在 Android WebView 中适配深色模式（Dark Mode）是一个常见的需求，尤其是当加载的网页没有原生支持 prefers-color-scheme 时。本文将介绍 3 种主流方案，并分析它们的优缺点，帮助开发者选择最佳实现方式。

方案 1：JS 动态注入 CSS（适合任意网页）

核心思路

通过 JavaScript 动态插入 CSS，强制修改网页的背景、文字颜色等样式。

代码实现（Kotlin）

fun applyDarkMode(webView: WebView, isDarkMode: Boolean) {val css = if (isDarkMode) {"""html, body, body * {background-color: #1a1a1a !important;color: #e0e0e0 !important;}/* 隐藏某些元素 */#ad-container { display: none !important; }"""} else {"""html, body, body * {background-color: #ffffff !important;color: #000000 !important;}"""}val js = """var style = document.createElement('style');style.innerHTML = `${css.replace("\n", "")}`;document.head.appendChild(style);""".trimIndent()webView.evaluateJavascript(js, null)
}

调用时机

webView.webViewClient = object : WebViewClient() {override fun onPageFinished(view: WebView?, url: String?) {applyDarkMode(webView, isDarkMode)}
}

优缺点

✅ 优点：

适用于任何网页（包括第三方网页）。
可精细控制特定元素的样式（如隐藏广告）。

❌ 缺点：

可能受 CSP（内容安全策略）限制，导致注入失败。
部分网页可能因 CSS 优先级问题无法覆盖默认样式。

方案 2：强制 WebView 深色渲染（API 29+）

核心思路

Android 10 (API 29) 引入了 WebSettingsCompat.FORCE_DARK，可让 WebView 自动适配深色模式。

代码实现

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {WebSettingsCompat.setForceDark(webView.settings,if (isDarkMode) WebSettingsCompat.FORCE_DARK_ON else WebSettingsCompat.FORCE_DARK_OFF)
}

适配网页

网页需支持 prefers-color-scheme：

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {body {background: #121212;color: #f0f0f0;}
}

优缺点

✅ 优点：

系统级支持，兼容性较好（适用于支持 prefers-color-scheme 的网页）。
无需手动注入 CSS，减少代码维护成本。

❌ 缺点：

仅适用于 API 29+。
如果网页未适配 prefers-color-scheme，可能渲染异常。

方案 3：拦截并修改网页内容（高级方案）

核心思路

通过 WebViewClient.shouldInterceptRequest 拦截 HTML/CSS，动态替换样式。

代码示例

webView.webViewClient = object : WebViewClient() {override fun shouldInterceptRequest(view: WebView?,request: WebResourceRequest?): WebResourceResponse? {if (request?.url?.toString()?.endsWith(".css") == true) {// 修改 CSS 内容val darkCss = """body { background: #1a1a1a !important; }""".trimIndent()return WebResourceResponse("text/css","UTF-8",ByteArrayInputStream(darkCss.toByteArray()))}return super.shouldInterceptRequest(view, request)}
}

优缺点

✅ 优点：

可深度定制网页样式，甚至替换整个 CSS 文件。
不受 CSP 限制，适用于严格安全策略的网页。

❌ 缺点：

实现复杂，需处理各种资源加载情况。
可能影响网页功能（如动态加载的样式）。

最佳实践推荐

方案	适用场景	兼容性	实现难度
JS 注入 CSS	任意网页，需动态调整样式	所有版本	⭐⭐
WebView 强制深色	网页已支持 `prefers-color-scheme`	API 29+	⭐
拦截修改网页	需要深度定制样式	所有版本	⭐⭐⭐