Android app的暗黑模式适配实现

原文地址: Android app的暗黑模式适配实现 – Stars-One的杂货小窝

很久之前放在草稿箱的一篇简单笔记,是之前蓝奏云批量下载工具Android版本实现暗黑主题的适配记录

本文所说的这里的暗黑主题,应该只支持Android10系统,不过我手头的Flyme系统(Android9)上测试也有效果,其他低版本则没有测试(不过之后版本也没用户反馈过此问题应该视作都兼容了吧…)

效果的话,没有搞太复杂,APP的主题会自动随着系统主题变化(没搞那种APP内部切换主题)

写的比较简陋,各位见笑了

效果

原理说明

Android10开始,支持深色主题,我们想要实现,就是在values和values-night下写2个themes.xml,里面使用不同的主题色即可

由于APP开发时间比较久,如果想要适配深色主题,要改的地方可太多了

于是我这里就是选择了亮色和暗色都设置一套APP的文本颜色和背景颜色,之后即可对全局APP的文字和组件背景色进行覆盖,从而一键式完成暗黑模式的适配工作

颜色文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#03A9F4</color>
    <color name="colorPrimaryDark">#0288D1</color>
    <color name="colorAccent">#40C4FF</color>
    <color name="colorGrey">#9e9e9e</color>
    <color name="colorBlack">#000000</color>
    <color name="colorBackground">#f1f1f1</color>
    <color name="color_rose">#dd1c73</color>
</resources>

亮色主题:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!--用作背景色        -->
    <item name="colorOnPrimary">@color/white</item>
    <!-- 第二背景色,与上面的反过来       -->
    <item name="colorOnSecondary">@color/gray_600</item>

    <item name="colorAccent">@color/colorAccent</item>

    <item name="android:textColor">@color/black</item>
    <item name="backgroundColor">@color/colorPrimary</item>
    <item name="android:statusBarColor">?attr/colorPrimary</item>
</style>

暗色主题:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <!--用作背景色        -->
    <item name="colorOnPrimary">@color/black</item>
    <item name="colorOnSecondary">@color/white</item>

    <item name="colorAccent">@color/colorAccent</item>

    <item name="android:textColor">@color/white20</item>
    <item name="backgroundColor">@color/colorPrimaryDark</item>
    <item name="android:statusBarColor">?attr/colorPrimary</item>
</style>

上文提到的3个属性即是覆盖了系统的文本颜色和背景颜色,因为APP是沉浸式状态栏设计,所以我状态栏的颜色也一起设置了

<item name="android:textColor">@color/white20</item>
<item name="backgroundColor">@color/colorPrimaryDark</item>

<item name="android:statusBarColor">?attr/colorPrimary</item>

PS:上述我设置的暗色主题的字体颜色是有点灰色white20,各位可以看着调整下

官方的推荐是使用下面4个属性:

• ?attr/colorControlNormal 一种通用图标颜色。该颜色包含一个停用状态
• ?android:attr/textColorPrimary: 这是一种通用型文本颜色。它在浅色主题背景下接近于黑色，在深色主题背景下接近于白色。该颜色包含一个停用状态。
• ?attr/colorSurface:它代表表面的颜色，通常是应用程序的主要背景色或容器的背景色。在浅色主题中，通常为白色或浅灰色，在深色主题中，通常为黑色或深灰色。
• ?attr/colorOnSurface:属性用于设置界面元素的前景颜色，如文本、图标等。它代表了在 colorSurface 背景上显示的颜色。在浅色主题中，通常为深色（如黑色）以提供对比度，在深色主题中，通常为浅色（如白色）。

如果是在刚开始写一个新的APP,注意使用上述颜色,之后就比较好的可以支持暗黑模式了,如下面代码

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="开始说明"
    android:textColor="?android:attr/textColorPrimary"
    android:textSize="18sp"
    android:textStyle="bold" />

其他补充

1.Toolbar颜色变黑色

这里发现设置的Toolbar在暗黑模式下是变为了黑色,但是我不想要黑色,想要我自己设置的暗一点蓝色效果,于是使用了MaterialToolbar,并对其进行了属性的设置就可达到需要的效果

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:navigationIconTint="?attr/colorOnPrimary"
    app:popupTheme="@style/AppTheme"
    app:theme="@style/AppTheme"
    app:titleTextColor="?attr/colorOnPrimary"
    app:title="@string/app_name"/>

• background 背景色
• navigationIconTint 左侧导航图标(返回箭头)的图标颜色
• titleTextColor Toolbar的标题颜色

2.获取颜色代码方法

想要在代码里获取?android:attr/textColorPrimary这个颜色,如何获取?

@ColorInt
fun Context.getColorResCompat(@AttrRes id: Int): Int {
    val resolvedAttr = TypedValue()
    this.theme.resolveAttribute(id, resolvedAttr, true)
    val colorRes = resolvedAttr.run { if (resourceId != 0) resourceId else data }
    return ContextCompat.getColor(this, colorRes)
}

使用:

val color = getColorResCompat(android.R.attr.textColorPrimary)
textview.setTextColor(color)

参考

• 深色主题背景  |  Android 开发者  |  Android Developers
• 以编程方式将文本颜色设置为主要的android textview |
• Android夜间模式的简单实现_android 夜间模式_xuzhb24的博客-CSDN博客
• Android 适配深色模式的总结 – 掘金