Material Design 3 uses colorPrimary for actionBar, navBar and calendar background color. How do I disable this?

Question

After upgrading to Material Design 3, I noticed that the background colors of certain things changed to a faded version of whatever my primary color is set to. For example, if I set my primary color to Red, the navBar and Calendar are now somewhat pink.

<style name="AppTheme" parent="Base.AppTheme" />

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red</item>

</style>

I don't know why Material Design assumes that I want these background colors. My design documents require a white background, and setting the primary color to white is not an option. If I don't set a primary color at all, it defaults to purple!

I had some luck with navBar, because you can set the background color of each item, but no luck with the calendar. I've tried setting everything that sounds color related on a calendar style. So far nothing changes the calendar background except primaryColor. backgroundColor, backgroundTint, etc. Nothing has worked. Does anyone know how to override this behavior on Material Design 3?

I simply want to set my colorPrimary to green and set the background colors of actionBar, navBar, and calendar to white.

Ironstone

Answer 1

According to documentation and what i've tested, it seems material theme automatically find matching colors for you haven't specified. I've made a simple reproducer to show you the problem.

First, with only colorPrimary set :

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red1</item>
</style>

<color name="red1">#FB1100</color>

You can see theme set every color for you

In your case, i believe you have to set your own colors in the correct theme field, like the following example.

Solution

I've made a POC to test behavior (I know colors don't match Material Guidelines, but it's for test purpose only) Here you can see i've theme colors matching what i've set, and not what Material theme want.

<style name="Base.AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">@color/red1</item>
    <item name="colorOnPrimary">@color/red2</item>
    <item name="colorPrimaryContainer">@color/red3</item>
    <item name="colorOnPrimaryContainer">@color/red4</item>
    <item name="colorPrimaryInverse">@color/red5</item>

    <item name="colorSecondary">@color/yellow1</item>
    <item name="colorOnSecondary">@color/yellow2</item>
    <item name="colorSecondaryContainer">@color/yellow3</item>
    <item name="colorOnSecondaryContainer">@color/yellow4</item>

    <item name="colorTertiary">@color/green1</item>
    <item name="colorOnTertiary">@color/green2</item>
    <item name="colorTertiaryContainer">@color/green3</item>
    <item name="colorOnTertiaryContainer">@color/green4</item>

    <item name="android:colorBackground">@color/blue1</item>
    <item name="colorOnBackground">@color/blue2</item>
    <item name="colorSurface">@color/purple1</item>
    <item name="colorOnSurface">@color/purple2</item>
    <item name="colorSurfaceVariant">@color/purple3</item>
    <item name="colorOnSurfaceVariant">@color/purple4</item>
    <item name="colorSurfaceInverse">@color/purple5</item>
    <item name="colorOnSurfaceInverse">@color/purple6</item>
</style>

<color name="red1">#FB1100</color>
<color name="red2">#FD3A2C</color>
<color name="red3">#FD6459</color>
<color name="red4">#FF9189</color>
<color name="red5">#FFBABA</color>

<color name="yellow1">#FFC800</color>
<color name="yellow2">#FFDC5C</color>
<color name="yellow3">#FFE896</color>
<color name="yellow4">#FFEEAF</color>

<color name="green1">#4FCA00</color>
<color name="green2">#8EFF46</color>
<color name="green3">#ADFF79</color>
<color name="green4">#C8FFA6</color>

<color name="blue1">#0048FF</color>
<color name="blue2">#487CFF</color>

<color name="purple1">#9500FF</color>
<color name="purple2">#AD3AFF</color>
<color name="purple3">#C169FF</color>
<color name="purple4">#D8A1FF</color>
<color name="purple5">#E6C2FF</color>
<color name="purple6">#F3E1FF</color>

Here you can see every color used by my components is sourced from my theme, and not by Material itself. (I know its cringy with theses colors, but I made it on purpose to identify behaviors for each field category (primary, secondary, tertiary, background, surface, etc)

Disclaimer : I don't have your code so i can't tell you exactly which field you have to set, but you could easily use my values to find out which one is used to color your component

Again, here is the documentation where you can find every field and its default value for Material default theme.

Hope this help you fix your problem, and if you need more help, please provide a minimal reproducer so we can try with the exact same config.

Have a nice day !

Dentist

Wow, it looks like "colorSurface" is what sets the navigation bar color? And if that isn't set, it defaults to some variation of colorPrimary. This gives me a lot to work with. Thanks for the help! – Ironstone

Turns out that the calendar is still using a variant of the primary color for the background color. – Ironstone

add your updated code to your question please – Dentist

You can even turn off Elevation Overlay by setting “elevationOverlayEnabled”=false. – Granulite