通过css注入实现的android webview的夜间模式

一开始，产品跟我确认是否能够实现uc的夜间模式，我回答，当然可以，uc可以，我们也可以。

但是后来发现不是酱紫的，找了很多方法都不能做到uc那样，最后找到一些方法就是webview调用js、

当然，这个方案也不能做到像uc那样完美，但相对来说，勉勉强强，应该比调节亮度的应该要好些

原理就是在webview的加载结束，调用css代码，改变html页面的背景色、文字颜色、边框颜色等。

night.css代码如下

div,section,ul,li,a,h1,h2,h3,p,link,textarea,form,select,input,span,button,em,menu,aside,table,tr,td,nav,img,dl,dt,dd, html, body,strong{
background:#222222 !important;color:#888888!important;
border-color:#555555 !important;
scrollbar-arrow-color:#CCCCCC !important;
scrollbar-base-color:#222222 !important;
scrollbar-shadow-color:#222222 !important;
scrollbar-face-color:#222222 !important;
scrollbar-highlight-color:#222222 !important;
scrollbar-dark-shadow-color:#222222 !important;
scrollbar-3d-light-color:#222222 !important;
scrollbar-track-color:#222222 !important;}
strong{display:block;}
a,a *{color:#888888 !important;text-decoration:none !important;}a:visited,a:visited *,a:active,a:active *{color:#555555 !important;}
a:hover,a:hover *{color:#888888 !important;
background:#222222 !important;}
input,select,option,button,textarea{color:#888888 !important;
background:#222222 !important;
border:#555555 !important;
border-color: #888888 #888888 #888888 #888888 !important;}
input:focus,select:focus,option:focus,button:focus,textarea:focus,input:hover,input[type=button],input[type=submit],input[type=reset],input[type=image] {border-color: #888888 #888888 #888888 #888888 !important;}
input[type=button]:focus,input[type=submit]:focus,input[type=reset]:focus,input[type=image]:focus, input[type=button]:hover,input[type=submit]:hover,input[type=reset]:hover,input[type=image]:hover {color:#888888 !important;background:#222222 !important; border-color: #888888 #888888 #888888 #888888 !important;}

在webview加载结束onPageFinished时调用

if( nightCode == null )
{
InputStream is = getResources().openRawResource( R.raw.night );
byte[] buffer = new byte[is.available()];
is.read( buffer );
is.close();
nightCode = Base64.encodeToString( buffer , Base64.NO_WRAP );
}
mWebView.loadUrl( "javascript:(function() {" + "var parent = document.getElementsByTagName('head').item(0);" + "var style = document.createElement('style');" + "style.type = 'text/css';" + "style.innerHTML = window.atob('" + nightCode + "');" + "parent.appendChild(style)" + "})();" );

就可以实现夜间模式啦，如果想再设置回来，就在调用一下日间模式的day.css.

在调用css成功后，有遇到过一个问题，发现粗体的文字在调用css过程中会被截掉，只显示上面一半文字，，想不明白啊，后来通过方法把网页源码给打印出来，发现那些粗体有问题的文字都用strong给包起来了，后来加上strong{display:block;}就ok啦。

获取网页源码的方法：http://www.cnblogs.com/zhwl/archive/2013/10/18/3375775.html

网页中的方法如果没有打印出来，是在showSource方法上少加了@JavascriptInterface

最后，下载资源见：http://download.csdn.net/download/shuishuixiaoping/10168280。

第一次写博客，勿喷哦~~~~

通过css注入实现的android webview的夜间模式相关推荐

android menu夜间模式,Android常用技巧夜间模式开发浅析
前言 Android的夜间模式主要主用于阅读方面,在QQ,微信读书,新闻阅读类一般会有相应的功能,本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现. 效果图展示功能实现简介 APP ...
android简单的夜间模式
现在android项目values下打 attrs.xml <?xml version="1.0" encoding="utf-8"?> <r ...
android自动夜间模式,Android实现日夜间模式的深入理解
在本篇文章中给出了三种实现日间/夜间模式切换的方案,三种方案综合起来可能导致文章的篇幅过长,请耐心阅读. 1.使用 setTheme的方法让 Activity重新设置主题: 2.设置 Android ...
android 8.1 夜间模式,android 快速实现夜间模式
最近项目中遇到了一个问题,夜间模式在8.0以上的手机中不起作用,查看了一下原因,是夜间模式实现方法的问题.分两种情况介绍一下先看一下运行效果: 第一种是目前项目中用到的,是以前的开发人员写的,存在 ...
Android自动启用夜间模式,Android – 切换夜间模式
什么是夜间主题以及如何在ANDROID中使用它? Support Library 23.2(应用于API14+)推出了适合Android Apps的DayNight主题,它将根据时间和用户最后一次提供 ...
一种简单快速的方式实现 Android App 的夜间模式
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
android 一键切换夜间模式,实用小工具“月食”：一键切换夜间模式
很多朋友都习惯在夜晚被窝里玩手机,这对眼睛非常不好.这时候,开启夜间模式,可以更好地舒缓眼睛疲劳.然而并不是所有App都支持夜间模式,怎么办?所幸安卓还是比较开放的,一些App可以令系统开启全局夜间模 ...
android 快速实现夜间模式
最近项目中遇到了一个问题,夜间模式在8.0以上的手机中不起作用,查看了一下原因,是夜间模式实现方法的问题.分两种情况介绍一下先看一下运行效果: 第一种是目前项目中用到的,是以前的开发人员写的,存在 ...
android如何做夜间模式,Android实现日夜间模式的三种常用方法（一）
1.使用 setTheme的方法让 Activity重新设置主题: 2.设置 Android Support Library中的 UiMode来支持日间/夜间模式的切换: 3.通过资源 id 映射,回 ...

通过css注入实现的android webview的夜间模式

通过css注入实现的android webview的夜间模式相关推荐

最新文章

热门文章