Search code examples
androidandroid-actionbarandroid-toolbarandroid-dark-themeandroid-darkmode

Android ActionBar/Toolbar colors different in Light vs Dark themes

I am trying to understand why the ActionBar is styled differently in Light vs Dark themes. Below is a simple settings screen that can toggle between Light and Dark themes with identical themes.

enter image description here

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="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>

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

In the Light them, the ActionBar comes across as blue and white, indicating it is using colorPrimary and colorOnPrimary. In the Dark theme it comes across as red and green, indiciating it is using colorSurface and colorOnSurface. Why are these applied differently and how can I get consistent application of colors on the ActionBar?

Solution

  • Why are these applied differently

    Quote from the documentation:

    large surfaces should not use bright background colors because they can emit too much brightness. When applicable, the Material themes will provide this behavior out-of-the-box, e.g., by having the Light theme default to Widget.MaterialComponents.AppBarLayout.Primary and the Dark theme default to Widget.MaterialComponents.AppBarLayout.Surface.

    So, though you have the same colors for both light & dark themes, but the Primary colors are the preferable colors in the light mode, and the surface colors are for the dark mode.

    how can I get consistent application of colors on the ActionBar?

    This can be concluded from the previous documentation ..

    So, you just need to, have values\themes.xml to contain:

    1. colorPrimary & colorSurface to have the same value
    2. colorOnPrimary & colorOnSurface to have the same value

    Applying this to your example

    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>

    For more info, please check documentation.