Android webView适配H5暗黑模式

本文介绍: 第一步首先And roi d 必须是Q 就是10.0才能支持暗黑模式第二步设置And roid webView暗黑模式 We bViewFe a ture必须引入这个包implementation ‘androidx.webkit:webkit:1.3.0′if (We bViewFea ture.i sFea tureSupp o rted(WebViewFea ture.FORCE_DARK)) { if(Da rkMo deUti ls.i sDa rkMo de(Ba seAp pli cat ion

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

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

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 &amp; 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适配暗黑模式希望能帮到各位少走弯路

原文地址:https://blog.csdn.net/wan903531306/article/details/123840119

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_30128.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

相关文章

发表回复 取消回复

发表回复取消回复