Search code examples
androidmaterial-designandroid-theme

Android theme properties partially switching between light and dark colors

I am working on building a Light/Dark theme for my app. I want to use a custom shape for the all buttons in the app. But when swapping between themes, the colorAccent attribute isn't swapped for the button background color.

In the light mode, the colorAccent is Orange and it displays orange.

enter image description here

But in dark mode, the colorAccent is Purple but it still shows Orange

enter image description here

I know that the swapping is working, because I can change other colors and they get adopted. It's just the button shape.

I'm sure it has something to do with <solid android:color="@color/colorAccent" /> in the shape file.

Can anyone see what I am doing wrong?

Light Theme

<resources>
   <!--Top level DayNight theme to be used in AndroidManifest.xml-->
    <style name="MyCustomTheme" parent="Base.MyCustomTheme"/>

    <style name="MyCustomTheme.System.Defaults" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="android:fontFamily">@font/driver_font_family</item>
    </style>


    <style name="Base.MyCustomTheme" parent="MyCustomTheme.System.Defaults">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowBackground">@color/OffWhite</item>

        <!--Component styles-->
        <item name="buttonStyle">@style/MyCustomTheme.Button</item>
    </style>

</resources>

Night Theme

<resources>
    <style name="MyCustomTheme" parent="Base.MyCustomTheme">
        <item name="colorPrimary">@color/Green</item>
        <item name="colorPrimaryDark">@color/Red</item>
        <item name="colorAccent">@color/Purple</item>
        <item name="android:windowBackground">@color/BlackDark</item>
    </style>
</resources>

rounded_corners.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners  android:radius="10dp" />
    <padding  android:padding="0dp"/>
    <solid android:color="@color/colorAccent" />
</shape>

colors.xml

<resources>
    <!--Leaving these here since they are refrenced by the system and other components-->
    <color name="colorPrimary">@color/NavyBlue</color>
    <color name="colorPrimaryDark">@color/NavyBlueDark</color>
    <color name="colorAccent">@color/Orange</color>

    <color name="Red">#E84E3C</color>
    <color name="Purple">#745EC4</color>
    <color name="Green">#2FCC70</color>
    <color name="NavyBlue">#34495E</color>
    <color name="NavyBlueDark">#2B3D4F</color>
    <color name="BlueDark">#394D82</color>    
    <color name="OffWhite">#EDF1F2</color>
    <color name="BlackDark">#262626</color>
</resources>
Solution

  • The issue is here:

    <solid android:color="@color/colorAccent" />

    In this way you are linking the color defined in colors.xml (which is @color/Orange). Instead you should link the attribute defined in the app theme:

    Change to:

    <solid android:color="?attr/colorAccent" />