Android app的暗黑模式适配实现

这篇具有很好参考价值的文章主要介绍了Android app的暗黑模式适配实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

效果

Android app的暗黑模式适配实现

原理说明

Android10开始,支持深色主题,我们想要实现,就是在valuesvalues-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)
}

使用:文章来源地址https://www.toymoban.com/news/detail-746122.html

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

参考

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

到了这里,关于Android app的暗黑模式适配实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Android】app应用内版本更新升级(DownloadManager下载,适配Android6.0以上所有版本)

    版本的升级和更新是一个线上App所必备的功能,App的升级安装包主要通过 应用商店 或者 应用内下载 两种方式获得,大部分app这两种方式都会具备,应用商店只需要上传对应平台审核通过即可,而应用内更新一般是通过以下几种方式: 1.集成第三方库如 appupdateX、bugly 的更新

    2024年02月11日
    浏览(100)
  • vue2自定义切换主题 dark暗黑主题(暗黑模式)

    业务要求要做一个主题色切换,类似于暗黑模式,以前没有做过于是在网络上搜罗现成的解决方案,由于是vue2的项目,找了很久都没有找到一个好的方便的解决方案,最后在github找到一个使用css3的解决方案,觉得十分不错,也很简单明了,于是就拿来直接用了,参考的gith

    2024年02月15日
    浏览(40)
  • 暗黑2能用Java开发?还能生成APP?

    最近烧哥发现个宝藏项目,竟然用Java开发了暗黑2出来。 众所周知,暗黑2是暴雪开发的一款经典游戏,距今虽有20多年,仍然有很多粉丝。 粉丝延续热情的方式有很多,一种是做Mod,比如魔电,对怪物、技能、物品、场景、甚至游戏机制都有大改,目前还在定期更新,并有战

    2024年02月13日
    浏览(27)
  • Android 白天黑夜模式切换适配及引起的Activity销毁重启解决

    目录 一、白夜模式切换,Activity销毁重启解决: 二、 暗黑模式适配  1. 添加依赖:   2. 复制下面工具类方法直接使用即可: 3.资源适配:  4. 适配回调: 5.切换白夜模式注意事项:         当白夜模式切换时,activity会销毁重新加载,谷歌是希望重新加载Activity可以刷新页面UI,但我的

    2023年04月20日
    浏览(31)
  • CSS判断手机暗黑模式

    手机有个功能到了晚上会自动变成深色也就是暗黑模式.这种情况下网页会自动变颜色.如果想自由控制暗黑模式下的html样式的话,可以用如下方式: 这就只会在暗黑模式的时候才生效!

    2024年02月10日
    浏览(35)
  • iOS系统暗黑模式

    暗黑模式颜色适配: 方式1: Assets配置 :在Assets中配置好颜色后,可以通过+colorNamed: 放大获取到动态颜色。 方式2:代码配置 ,通过代码+colorWithDynamicProvider: 可以看出来生成的颜色为UIDynamicProviderColor, 系统使用类簇隐藏了真正的颜色实现。 当用户选择的暗黑模式时,会触

    2024年02月07日
    浏览(29)
  • ant-design-vue 自由切换 暗黑模式dark

    思路 引入 dark.css 文件 动态切换 prefixCls 实现效果 我们来看看官网怎么说的 官网地址 除了 less 定制主题 外,我们还提供了 CSS Variable 版本以支持动态切换主题能力。你可以在 ConfigProvider 进行体验。 调用 ConfigProvider 配置方法设置主题色: 默认情况下,CSS Variable 会以 --ant 作

    2023年04月21日
    浏览(46)
  • vue3 element-plus 暗黑模式(主题切换)简易版

    暗黑模式是指在应用程序或操作系统中使用暗色背景和浅色文本的界面设计。与传统的亮色模式相比,暗黑模式具有以下特点: 减少眼部疲劳:使用暗色背景可以减少屏幕发出的蓝光,减轻长时间使用电子设备对眼睛的疲劳程度。这对于在晚上或低光环境下使用设备的人来说

    2024年02月08日
    浏览(60)
  • 设计模式之适配器模式(Adapter)的C++实现

    在软件功能开发中,由于使用环境的改变,之前一些类的旧接口放在新环境的功能模块中不再适用。如何使旧接口能适用于新的环境?适配器可以解决此类问题。适配器模式:通过增加一个适配器类,在适配器接口中做一些适配操作,将旧模块类转换成使用者Client类期望的接

    2024年02月12日
    浏览(44)
  • 适配器模式实现stack和queue

    适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结),该种模式是将一个类的接口转换成客户希望的另外一个接口。 虽然stack和queue中也可以存放元素,但在STL中并没有将其划分在容器的行列,而是将其称为容器适配器

    2024年02月11日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包