Android WebView 深色模式适配方案总结
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+ | ⭐ |
| 拦截修改网页 | 需要深度定制样式 | 所有版本 | ⭐⭐⭐ |
推荐方案
- 优先检查网页是否支持
prefers-color-scheme，如果支持，使用 方案 2（FORCE_DARK）。 - 如果网页不受控（如第三方页面），使用 方案 1（JS 注入 CSS）。
- 如果需要更高级控制（如企业定制页面），可尝试 方案 3（拦截修改）。
总结
在 Android WebView 中实现深色模式，主要有 动态注入 CSS、系统强制深色渲染 和 拦截修改网页 三种方式。选择方案时需考虑：
- 网页是否可控（能否修改 CSS？）
- Android 版本兼容性（是否需要支持旧版？）
- 是否需要精细控制（如隐藏广告、修改字体等）
如果你的网页可控，建议直接使用 prefers-color-scheme + FORCE_DARK；如果是第三方网页，JS 注入 CSS 是最稳妥的方案。