【问题标题】:Android ActionBar/Toolbar colors different in Light vs Dark themesAndroid ActionBar/Toolbar 颜色在 Light 和 Dark 主题中不同
【发布时间】:2021-01-11 19:08:52
【问题描述】:

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

值\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>

值\colors.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。在 Dark 主题中,它显示为红色和绿色,表明它正在使用 colorSurfacecolorOnSurface。为什么这些应用不同,我如何才能在ActionBar 上获得一致的颜色应用?

【问题讨论】:

    标签: android android-actionbar android-toolbar android-dark-theme android-darkmode


    【解决方案1】:

    为什么这些应用不同

    引用自文档:

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

    因此,虽然浅色和深色主题的颜色相同,但 Primary 颜色是浅色模式的首选颜色,surface 颜色适用于深色模式。

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

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

    所以,你只需要,让values\themes.xml 包含:

    1. colorPrimary & colorSurface 具有相同的值
    2. colorOnPrimary & colorOnSurface 具有相同的值

    将此应用于您的示例

    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

    【讨论】:

    • 关于 Primary vs Surface 的引用突然让一切变得清晰。感谢您提供链接和 XML 示例(并再次帮助我)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-03-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-07
    相关资源
    最近更新 更多