Android webView适配H5暗黑模式

于 2022-03-30 11:34:27 发布
阅读量8.2k 收藏 9
点赞数 2
分类专栏： Android 文章标签： 暗黑模式 Android webview暗黑模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wan903531306/article/details/123840119
版权

第一步 首先Android 必须是Q 就是10.0才能支持暗黑模式

第二步 设置Android webView暗黑模式 WebViewFeature必须引入这个包

implementation 'androidx.webkit:webkit:1.3.0'
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
            if(DarkModeUtils.isDarkMode(BaseApplication.getInstace().getApplication())){
                WebSettingsCompat.setForceDark(webSettings, WebSettingsCompat.FORCE_DARK_ON);
            }else{
                WebSettingsCompat.setForceDark(webSettings, WebSettingsCompat.FORCE_DARK_OFF);
            }
        }

DarkModeUtils这个就是自己定义的切换暗黑模式保存的状态呢  我也贴下代码

public class DarkModeUtils {

    public static final String KEY_CURRENT_MODEL = "night_mode_state_sp";

    private static int getNightModel(Context context) {
        SharedPreferences sp = context.getSharedPreferences(KEY_CURRENT_MODEL, Context.MODE_PRIVATE);
        return sp.getInt(KEY_CURRENT_MODEL, AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
    }

    public static void setNightModel(Context context, int nightMode) {
        SharedPreferences sp = context.getSharedPreferences(KEY_CURRENT_MODEL, Context.MODE_PRIVATE);
        sp.edit().putInt(KEY_CURRENT_MODEL, nightMode).apply();
    }

    /**
     * ths method should be called in Application onCreate method
     *
     * @param application application
     */
    public static void init(Application application) {
        int nightMode = getNightModel(application);
        AppCompatDelegate.setDefaultNightMode(nightMode);
    }

    /**
     * 应用夜间模式
     */
    public static void applyNightMode(Context context) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
        setNightModel(context, AppCompatDelegate.MODE_NIGHT_YES);
    }

    /**
     * 应用日间模式
     */
    public static void applyDayMode(Context context) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
        setNightModel(context, AppCompatDelegate.MODE_NIGHT_NO);
    }

    /**
     * 跟随系统主题时需要动态切换
     */
    public static void applySystemMode(Context context) {
        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
        setNightModel(context, AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
    }

    /**
     * 判断App当前是否处于暗黑模式状态
     *
     * @param context 上下文
     * @return 返回
     */
    public static boolean isDarkMode(Context context) {
        int nightMode = getNightModel(context);
        if (nightMode == AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) {
            int applicationUiMode = context.getResources().getConfiguration().uiMode;
            int systemMode = applicationUiMode & Configuration.UI_MODE_NIGHT_MASK;
            return systemMode == Configuration.UI_MODE_NIGHT_YES;
        } else {
            return nightMode == AppCompatDelegate.MODE_NIGHT_YES;
        }
    }

然后还要设置 webView背景

webview.setBackgroundColor(ContextCompat.getColor(this,R.color.white));

颜色必须要有两份 一个是默认的颜色 另一个是night模式的 如下图

 night在res文件下创建一个 values-night->colors.xml 就可以了

如果不知道H5同事那边配置的是不是对的  我们可以在本地的assets的文件下创建一个html 测试下 没问题 在等H5同事那边是配好，下边看下html的代码 其实也很简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>页面适应黑暗模式</title>
</head>
<style type="text/css">
    .back {background: white; color:  #555;text-align: center}

@media (prefers-color-scheme: dark) {
  .back {background:  #333; color: white;}
  .models {border:solid 1px #00ff00}
}

@media (prefers-color-scheme: light) {
  .back {background: white; color:  #555;}
  .models {border:solid 1px #2b85e4}
}
</style>
<body class="back">
<div class="models"><h1>测试文字</h1></div>
</body>
</html>

然后在加载本地的html

webview.loadUrl("file:///android_asset/test.html");//测试黑暗模式

看下效果 

 效果看起来完美 

后边我会在更新下 app适配暗黑模式  希望能帮到各位 少走弯路

我想吃辣条
关注
专栏目录
Android适配黑夜模式,WebView适配文章黑夜模式
weixin_42132352的博客
05-31 1024
为了能够让简书，掘金，CSDN，公众号的文章展示成黑夜模式，需要webview做相关适配。原理其实也比较简单，只要加载页面时替换相关的css样式做替换。实际实现效果每个站点各有不同，下面就介绍下每个站点是如何做实现的。项目地址简书reader-night-mode简书网站是有黑夜模式的，所以实现起来相对简单。但是默认用webview加载简书文章时，它显示的是日间模式效果。打开chrome调试器，然...
Android WebView添加夜间模式
04-01
Android WebView添加夜间模式
webview中加入黑夜模式与非webview中做处理
yixiu03的博客
07-16 1889
  由于最近需要做webview黑夜模式的处理，找了好多资料，最后为大家奉上，此篇并不完全是原创，算是借鉴哈！ 首先是在application中做初始化 initPrefs(); initNightMode(); /** * 初始化SharedPreference */ protected void initPrefs() { SharedPreferencesUtil.ini...
通过css注入实现android webview的夜间模式
08-15
通过css注入的方式实现android webview的夜间模式。
Android APP以及webview夜间模式的浅析
qq_32331397的博客
12-04 2427
前言 Android的夜间模式主要主用于阅读方面，在QQ，微信读书，新闻阅读类一般会有相应的功能，本文主要介绍整体APP的夜间模式以及webview中夜间模式的实现。 效果图展示 image.png image.png 功能实现简介 APP的夜间模式有两种方式：1、通过切换theme来实现夜间模式。2、
Android WebView 深色主题适配
王人冉的博客
08-08 4143
深色主题适配时，webview可以通过api设置自动适配，不用再添加night资源，但是对系统版本有要求，需要android 10(Build.VERSION_CODES.Q)，才能调用此api。方法见如下. public class WebViewActivity extends AppCompatActivity { WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) {
通过css注入实现的android webview的夜间模式
12-21
不是通过改变屏幕亮度实现的夜间模式，通过改变html的属性实现。
Android Webview 通过反射实现夜间模式
梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到安宁.
01-05 4882
Webview实现夜间模式,如果没有自己内核的话可以通过注入js实现 ,比较常用,但是对于显示图片效果就很差了. 还有一种方式, 在4.0原生的浏览器是有夜间模式这个功能的,他叫反色,但是这个函数是hide的,那么进行反射就可以了 @Override protected void onCreate(Bundle savedInstanceState) { ...
Android Webview 加载 H5Video
01-12
搜索很多资料后发现很多问题，都是关键代码片段，因为每个项目每个人产生的问题不同，Video在webview中加载不出来原因很多，可能是客户端少了参数，也可能是前端出了问题，经过研究后对Android WebView 加载H5Video...
android 关于webview 加载h5网页开启定位的方法
08-27
以下是对"android 关于webview 加载h5网页开启定位的方法"的详细解释。 首先，开启Webview的DOM Storage功能是必要的，因为许多现代的H5网页会利用本地存储来保存用户数据。这可以通过调用`settings....
暗黑模式？安卓适配一波
01-03
前言 第一次听到暗黑模式的时候，感觉好酷啊，听着就好看（也不知道我怎么听出来的）。苹果在前几年就有暗黑模式的风声，好像是在IOS11、IOS12的时候就说要推出了，结果愣生生等到了IOS13暗黑模式才推出。IOS13推出到现在已经大半年了，系统应用没得说，完美适配，三方应用也都陆续支持了暗黑模式，就连微信在前段时间的更新中也实现了暗黑模式，先来欣赏下微信的暗黑模式吧！ 当Activity声明它处理配置更改时，onConfigurationChanged()将在主题更改时调用其方法。 要检查当前主题是什么，应用可以运行如下代码： val currentNightMode = configur
android webView夜间模式 长按识别图片以及二维码
05-17
android webView使用css实现夜间模式 长按识别图片以及二维码
夜间模式实现方法3 webview夜间模式
04-25
该文档总结了一种通过注入css实现夜间模式的方法。 兴趣的同学可以参考，有不懂的地方欢迎留言，共同进步！ 谢谢！
Android 暗黑模式，dark mode，demo源码
04-29
Android 暗黑模式，dark mode，demo源码。我们介绍了如何在Android上实现暗黑模式，也介绍了APP自主控制是否使用dark的方式
Android使用WebView调用H5完成摄像头扫描二维码
11-04
这篇教程将详细介绍如何在Android中利用WebView来调用H5页面，从而实现摄像头扫描二维码的功能。 首先，我们需要理解WebView的基本用法。WebView是Android SDK提供的一种控件，它可以加载本地或者远程的HTML、CSS和...
Android webview背景设置为透明无效 拖动时背景闪烁黑色
LVXIANGAN的专栏
01-20 4488
Adndroid 2.X的设置   webview是一个使用方便、功能强大的控件，但由于webview的背景颜色默认是白色，在一些场合下会显得很突兀（比如背景是黑色）。 此时就想到了要把webview的背景设置为透明，这样就可以与其背景融为一体。 在2.X的平台下，一般设置webview背景为透明的方法如下：           mWebView.setBack
Android记录24-WebView实现白天/夜间阅读模式
modabobo
04-01 501
前言 本篇博客给大家分享一个WebView的使用案例，实现Android调用JavaScript代码来控制白天/夜间模式。关于WebView如何使用，官网有很好的说明，Building Web Apps in WebView，小巫这里就不多赘述。 实现思路 跟Native应用不一样，我们可以很简单得实现调用系统API来达到，就是通过样式设置主题。如果我们的内容是html里面的内容，如何来达...
webView 夜间模式
songlang90的专栏
11-20 2596
在WebViewClient    onPageFinished  中添加 if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) { mWebView.evaluateJavascript("document.body.style.backgroundColor=\"black\"
android webview 加载h5 使用外部浏览器打开
最新发布
08-09
在Android中，WebView是用于显示网页内容的组件，而且它还具有加载HTML页面的功能。通常情况下，WebView会将网页内容在应用内部显示，但是我们也可以通过设置WebView的方式，使其在外部浏览器中打开网页。 要在外部浏览器中打开网页，我们可以通过重写WebView的WebViewClient类中的shouldOverrideUrlLoading方法来实现。该方法会在WebView加载URL之前被调用，并返回一个boolean值，该值表示是否由WebView处理URL。 代码示例如下： webView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 使用外部浏览器打开网页 Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(intent); return true; // 返回true表示由外部浏览器处理URL } }); 在上述代码中，我们首先创建了一个WebViewClient对象，并重写了其中的shouldOverrideUrlLoading方法。在该方法中，我们创建了一个Intent对象，使用ACTION_VIEW action，将URL转换为Uri，并通过该Intent启动外部浏览器来打开网页。然后我们返回true，表示由外部浏览器处理URL。 最后，我们将创建的WebViewClient对象设置给WebView，这样在加载网页时，WebView会先调用shouldOverrideUrlLoading方法来判断是否在外部浏览器中打开。若返回true，则会在外部浏览器中打开网页；若返回false，则会在WebView中显示网页内容。 通过上述方法，我们可以实现在Android中使用WebView加载H5页面时，使用外部浏览器打开网页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我想吃辣条

觉得不错，就可怜可怜博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值