一開始，產(chǎn)品跟我確認(rèn)是否能夠?qū)崿F(xiàn)uc的夜間模式，我回答，當(dāng)然可以，uc可以，我們也可以。

但是后來發(fā)現(xiàn)不是醬紫的，找了很多方法都不能做到uc那樣，最后找到一些方法就是webview調(diào)用js、

當(dāng)然，這個方案也不能做到像uc那樣完美，但相對來說，勉勉強(qiáng)強(qiáng)，應(yīng)該比調(diào)節(jié)亮度的應(yīng)該要好些

原理就是在webview的加載結(jié)束，調(diào)用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加載結(jié)束onPageFinished時調(diào)用

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)" + "})();" );

就可以實現(xiàn)夜間模式啦，如果想再設(shè)置回來，就在調(diào)用一下日間模式的day.css.

在調(diào)用css成功后，有遇到過一個問題，發(fā)現(xiàn)粗體的文字在調(diào)用css過程中會被截掉，只顯示上面一半文字，，想不明白啊，后來通過方法把網(wǎng)頁源碼給打印出來，發(fā)現(xiàn)那些粗體有問題的文字都用strong給包起來了，后來加上strong{display:block;}就ok啦。

獲取網(wǎng)頁源碼的方法：http://www.cnblogs.com/zhwl/archive/2013/10/18/3375775.html

網(wǎng)頁中的方法如果沒有打印出來，是在showSource方法上少加了@JavascriptInterface

最后，下載資源見：http://download.csdn.net/download/shuishuixiaoping/10168280。

第一次寫博客，勿噴哦~~~~

總結(jié)

以上是生活随笔為你收集整理的通过css注入实现的android webview的夜间模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。