android 浏览器夜间模式

最新推荐文章于 2022-03-30 11:34:27 发布

ifangler

最新推荐文章于 2022-03-30 11:34:27 发布

阅读量2.9k

点赞数

分类专栏： Android学习文章标签：夜间模式 onPageFinished 浏览器 webview

本文链接：https://blog.csdn.net/ifangler/article/details/39960477

版权

本文介绍了如何在Android浏览器中实现夜间模式，通过WebView加载特定JS代码，动态修改HTML页面元素颜色，以达到夜间阅读友好效果。

摘要由CSDN通过智能技术生成

在浏览器中有需要设置为夜间模式的功能，主要实现为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:#