Android适配黑夜模式,WebView适配文章黑夜模式

为了能够让简书，掘金，CSDN，公众号的文章展示成黑夜模式，需要webview做相关适配。原理其实也比较简单，只要加载页面时替换相关的css样式做替换。实际实现效果每个站点各有不同，下面就介绍下每个站点是如何做实现的。

项目地址

简书

reader-night-mode

简书网站是有黑夜模式的，所以实现起来相对简单。但是默认用webview加载简书文章时，它显示的是日间模式效果。打开chrome调试器，然后再简书上切换黑夜模式，我们可以看到使用黑夜模式时，body会有一个reader-night-mode的class样式加进去。

1

猜测简书的黑夜模式和这个class样式有关，那我们可以通过

WebView.setWebContentsDebuggingEnabled(BuildConfig.DEBUG)

调试webview，在chrome浏览器上输入chrome://inspect,然后就可以调试web页面了。我们打开一篇简书文章，通过调试器我们将body的样式替换成reader-night-mode，就会发现当前文章已经变成黑夜模式的了。

2

展开全文，去导航，去广告

为了使阅读体验更好，我们在打开文章时直接展开全文，同时去掉导航还有广告等和文章内容无关的元素，我们先通过调试器做测试。

3

4

正则替换css

通过刚刚的调试，发现这些效果对应的css样式是在当前html页面的head标签下，并不是通过css文件形式。因此先通过OkHttp请求文章地址生成html字符串，然后通过正则替换相关css。

先创建一个Wget工具类，用于将网页转成字符串,这里注意请求头固定成移动设备。

object Wget {

fun get(url: String): String {

val client = OkHttpClient.Builder()

.build()

val request = Request.Builder()

.url(url)

.header(

"user-