android 浏览器夜间模式

在浏览器中有需要设置为夜间模式的功能，主要实现为webView加载一段js代码到对应的url中，这段js会动态的修改html页面的各个标签的颜色，达到夜间模式的效果。加载的js代码如下

javascript: (function() {css = document.createElement('link');css.id = 'xxx_browser_2014';css.rel = 'stylesheet';css.href = 'data:text/css,html,body,header,div,a,span,table,tr,td,th,tbody,p,form,input,ul,ol,li,dl,dt,dd,section,footer,nav,h1,h2,h3,h4,h5,h6,em,pre{background: #333 !important;color:#616161!important;border-color:#454530!important;text-shadow:0!important;-webkit-text-fill-color : none!important;}html a,html a *{color:#5a8498!important;text-decoration:underline!important;}html a:visited,html a:visited *,html a:active,html a:active *{color:#505f64!important;}html a:hover,html a:hover *{color:#cef!important;}html input,html select,html button,html textarea{background:#4d4c40!important;border:1px solid #5c5a46!important;border-top-color:#494533!important;border-bottom-color:#494533!important;}html input[type=button],html input[type=submit],html input[type=reset],html input[type=image],html button{border-top-color:#494533!important;border-bottom-color:#494533!important;}html input:focus,html select:focus,html option:focus,html button:focus,html textarea:focus{background:#5c5b3e!important;color:#fff!important;border-color:#494100 #635d00 #474531!important;outline:1px solid #041d29!important;}html input[type=button]:focus,html input[type=submit]:focus,html input[type=reset]:focus,html input[type=image]:focus,html button:focus{border-color:#494533 #635d00 #474100!important;}html input[type=radio]{background:none!important;border-color:#333!important;border-width:0!important;}html img[src],html input[type=image]{opacity:.5;}html img[src]:hover,html input[type=image]:hover{opacity:1;}html,html body {scrollbar-base-color: #4d4c40 !important;scrollbar-face-color: #5a5b3c !important;scrollbar-shadow-color: #5a5b3c !important;scrollbar-highlight-color: #5c5b3c !important;scrollbar-dlight-color: #5c5b3c !important;scrollbar-darkshadow-color: #474531 !important;scrollbar-track-color: #4d4c40 !important;scrollbar-arrow-color: #000 !important;scrollbar-3dlight-color: #6a6957 !important;}dt a{background-color: #333 !important;}';document.getElementsByTagName('head')[0].appendChild(css);})();

使用webView的loadUrl来完成。

但是这个时候从webView显示页面的过程中背景颜色是从webView的颜色跳到js修改的颜色，即有一种颜色跳转的感觉，于是需要在夜间模式先修改webView的颜色为js中所对应的背景色。修改webView背景的代码可以在WebViewClient中的onPageFinished中进行设置，设置好后显示html页面时会修改webView的对应的背景颜色。

android 浏览器夜间模式相关推荐

手机uc浏览器夜间模式怎么设置调成全黑
手机uc浏览器夜间模式怎么设置调成全黑手机uc浏览器夜间模式怎么设置?在我们晚上使用浏览器的时候,我们需要将日间模式调整为夜间模式.有些朋友不知道如何设置,下面给大家演示一下手机uc浏览器夜间模式开 ...
android menu夜间模式,Android常用技巧夜间模式开发浅析
前言 Android的夜间模式主要主用于阅读方面,在QQ,微信读书,新闻阅读类一般会有相应的功能,本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现. 效果图展示功能实现简介 APP ...
android自动夜间模式,Android 夜间模式初探
当下各种阅读类APP(如各种浏览器,某日头条等)都会有夜间模式,也顺应了大家的睡前必须玩一下手机的作息习惯.关于夜间模式的实现,有很多种方法.这篇日志学习一下最简单的实现方式,通过setTheme(i ...
【android】夜间模式简单实现
完整代码,请参考我的博客园客户端,git地址:http://git.oschina.net/yso/CNBlogs 关于阅读类的app,有个夜间模式真是太重要了. 那么有两种方式可以实现夜间模式 1: ...
android官方夜间模式,Android夜间模式实践
前言由于项目需要,近段时间开发的夜间模式功能.主流的方案如下: 1.通过切换theme实现 2.通过resource id映射实现 3.通过Android Support Library的实现方案 ...
Android中夜间模式的三种实现方式
参考:https://www.jianshu.com/p/f3aaed57fa15 在本篇文章中给出了三种实现日间/夜间模式切换的方案: 使用 setTheme 的方法让 Activity 重新设置主 ...
android自动夜间模式,Android实现日夜间模式的深入理解
在本篇文章中给出了三种实现日间/夜间模式切换的方案,三种方案综合起来可能导致文章的篇幅过长,请耐心阅读. 1.使用 setTheme的方法让 Activity重新设置主题: 2.设置 Android ...
android自动夜间模式吗,Android夜间模式的实现方案
原标题:Android夜间模式的实现方案作者简介本篇来自 Sunlight1024的投稿,详细地讲解了关于Android应用的夜间模式的实现,希望大家喜欢! Sunlight1024的博客地址: ...
android studio夜间模式,android studio怎样实现夜间模式
满意答案 noxlqub 2016.05.01 采纳率:51% 等级:7 已帮助:210人关于阅读类的app,有个夜间模式真是太重要了. 那么有两种方式可以实现夜间模式 1:修改theme,重 ...

android 浏览器夜间模式

android 浏览器夜间模式相关推荐

最新文章

热门文章