微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Android ActionBar/Toolbar 颜色在 Light 和 Dark 主题中不同

如何解决Android ActionBar/Toolbar 颜色在 Light 和 Dark 主题中不同

我想了解为什么 ActionBar 在 Light 与 Dark 主题中的样式不同。下面是一个简单的设置屏幕,可以在具有相同主题的浅色和深色主题之间切换。

enter image description here

值\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Dark application theme. -->
    <style name="Theme.SettingsApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/blue_normal</item>
        <item name="colorPrimaryVariant">@color/blue_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <item name="colorSurface">@color/red</item>
        <item name="colorOnSurface">@color/green</item>
    </style>
</resources>

values-night\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Dark application theme. -->
    <style name="Theme.SettingsApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/blue_normal</item>
        <item name="colorPrimaryVariant">@color/blue_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <item name="colorSurface">@color/red</item>
        <item name="colorOnSurface">@color/green</item>
    </style>
</resources>

值\颜色.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="blue_normal">#FF3F7FBF</color>
    <color name="blue_dark">#FF2F6090</color>
    <color name="white">#FFFFFFFF</color>
    <color name="red">#FF0000</color>
    <color name="green">#00FF00</color>
</resources>

在 Light 它们中,ActionBar 呈现蓝色和白色,表明它使用了 colorPrimarycolorOnPrimary。在深色主题中,它显示为红色和绿色,表明它使用了 colorSurfacecolorOnSurface。为什么这些应用不同,我如何才能在 ActionBar 上获得一致的颜色应用?

解决方法

为什么这些应用不同

引自文档:

大型表面不应使用明亮的背景色,因为它们会发出过多的亮度。适用时,Material 主题将提供这种开箱即用的行为,例如,将 Light 主题默认为 Widget.MaterialComponents.AppBarLayout.Primary,将 Dark 主题默认为 Widget.MaterialComponents.AppBarLayout.Surface

因此,尽管明暗主题的颜色相同,但 Primary 颜色是亮模式下的首选颜色,而 surface 颜色则是暗模式下的首选颜色。

如何在 ActionBar 上获得一致的颜色应用?

这可以从之前的文档中得出结论..

因此,您只需要包含 values\themes.xml

  1. colorPrimarycolorSurface 具有相同的值
  2. colorOnPrimarycolorOnSurface 具有相同的值

将此应用于您的示例

values\themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Dark application theme. -->
    <style name="Theme.SettingsApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <item name="colorPrimary">@color/blue_normal</item>
        <item name="colorOnPrimary">@color/white</item>
        
        <item name="colorSurface">@color/blue_normal</item>
        <item name="colorOnSurface">@color/white</item>
    </style>
</resources>

有关详细信息,请check documentation

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。