[Top app bars] Theming the top app bar and Contextual action bar with custom colors not working in Material 3

[MML-Pro]

Description: Full description of the issue here

Update

after I created a new project with a Material 3 theme and I tried to change the top app bar and contextual action bar I can confirm it's a bug, I've opened issue here please star it or vote +1 to pay attention to it and solve it as soon as possible

Theming the top app bar

I followed the instruction in this link to apply a custom theme on all toolbar and contextual action bar in my app, but it's not working at all it's always be white color on light mode and dark in night mode, tested on material version implementation the following versions

implementation ('com.google.android.material:material:1.6.1') and implementation ('com.google.android.material:material:1.8.0-alpha01') android 11 and above

let's start with my colors light version

    <color name="primaryColor">#1aae66</color>
    <color name="primaryLightColor">#5ee194</color>
    <color name="primaryDarkColor">#007d3a</color>

    <color name="secondaryColor">#1de9b6</color>
    <color name="secondaryLightColor">#6effe8</color>
    <color name="secondaryDarkColor">#00b686</color>

    <color name="primaryTextColor">@color/white</color>
    <color name="secondaryTextColor">#000000</color>

colors night

 <color name="primaryColor" tools:ignore="MissingDefaultResource">@color/darker</color>
    <color name="primaryLightColor" tools:ignore="MissingDefaultResource">@color/darkGray</color>
    <color name="primaryDarkColor" tools:ignore="MissingDefaultResource">@color/black</color>

    <color name="secondaryColor" tools:ignore="MissingDefaultResource">#4db6ac</color>
    <color name="secondaryLightColor" tools:ignore="MissingDefaultResource">#82e9de</color>
    <color name="secondaryDarkColor" tools:ignore="MissingDefaultResource">#00867d</color>

theme.xml (light version)

<resources>
    <!-- Base application theme. -->
    <style name="Theme.DummyAppKotlin" parent="Theme.Material3.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/primaryDarkColor</item>
        <!-- Customize your theme here. -->
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
        <item name="popupMenuBackground">@color/primaryColor</item>

    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>

    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/primaryColor</item>
        <item name="colorOnSurface">@color/primaryDarkColor</item>
    </style>

theme.xml (night version)

<resources>
    <!-- Base application theme. -->
    <style name="Theme.DummyAppKotlin" parent="Theme.Material3.Dark.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryDarkColor</item>
        <item name="colorOnPrimary">@color/primaryTextColor</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryDarkColor</item>
        <item name="colorOnSecondary">@color/secondaryTextColor</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">@color/primaryDarkColor</item>
        <!-- Customize your theme here. -->
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="actionModeBackground">@color/contextualActionBarColor</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
        <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
        <item name="popupMenuBackground">@color/primaryColor</item>

    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>

    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/primaryColor</item>
        <item name="colorOnSurface">@color/primaryDarkColor</item>
    </style>

There is only one way that works to change the toolbar color, is to set my custom theme to AppBarLayout the attribute style="@style/Widget.App.Toolbar" is ignored in the toolbar and applied with AppBarLayout

here's example

 <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true">

             <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                style="@style/Widget.App.Toolbar" =============> This won't work
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:title="Post details" />

        </com.google.android.material.appbar.AppBarLayout>

The Second Problem

in Contextual Action Mode/Bar was when I tried to override its colors with the attributes actionModeBackground

<item name="actionModeBackground">@color/contextualActionBarColor</item>

it should be my dark black color but it's notworking/ignored, the other attribute actionModeTheme with <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item> it uses the main primary color green for action bar

This example of the contextual action bar of (material 3)

This example of the contextual action bar of (material 2) before I updated to material 3

Expected behavior: Screenshots and/or description of expected behavior

Source code: provided

Android API version:

Tested on Android API 29 and above

Material Library version:

Tested on stable material version ('com.google.android.material:material:1.6.1') and last one ('com.google.android.material:material:1.8.0-alpha01')

Device:

all devices real and emulators

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[hunterstich]

Hi @MML-Pro,

Thanks for filing an issue!

If I understand correctly, I think the main issue you're running into is the fact that app bars and contextual action bars in Material3 use colorSurface as their background color.

If you want just your app bar and contextual action bar to be dark, you could apply a theme overlay to your app bar layout:

        <com.google.android.material.appbar.AppBarLayout
            android:theme="@style/ThemeOverlay.Material3.Dark" =====> apply a dark theme to app bar and its descendants
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true">

             <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:title="Post details" />

        </com.google.android.material.appbar.AppBarLayout>

If you want to further customize what colors things are, you could create your own theme overlay instead of using ThemeOverlay.Material3.Dark and specify things like colorSurface, colorOnSurface, actionModeStyle, etc.

Going to close this for now but please re-open if this isn't clear, you have questions, or want to keep discussing!

[MML-Pro]

Hi @MML-Pro,

Thanks for filing an issue!

If I understand correctly, I think the main issue you're running into is the fact that app bars and contextual action bars in Material3 use colorSurface as their background color.

If you want just your app bar and contextual action bar to be dark, you could apply a theme overlay to your app bar layout:

        <com.google.android.material.appbar.AppBarLayout
            android:theme="@style/ThemeOverlay.Material3.Dark" =====> apply a dark theme to app bar and its descendants
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:liftOnScroll="true">

             <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:title="Post details" />

        </com.google.android.material.appbar.AppBarLayout>

If you want to further customize what colors things are, you could create your own theme overlay instead of using ThemeOverlay.Material3.Dark and specify things like colorSurface, colorOnSurface, actionModeStyle, etc.

Going to close this for now but please re-open if this isn't clear, you have questions, or want to keep discussing!

Hi @hunterstich

Unfortunately, you misunderstood my explanation of the issue, I don't wanna to change the appbar color to dark, I want to use my custom colors which is is "GREEN COLOR" and for the title is white color I alreasy use colorSurface for background color and colorOnSurface for the title to applyit in all appbars in my app but it didn't implemented

I've create demo app showing the problem please check it and re open the issue, I don't have permission to do that

https://github.com/MML-Pro/Material3DemoApp

[hunterstich]

Okay, apologies for the misunderstanding. It sounds like your trying to make all your app's toolbars green with white icons/text? Is that correct?

Looking through your sample's theme you could try:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Material3DemoApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <item name="appBarLayoutStyle">@style/Widget.App.AppBarLayout</item>
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
    </style>

    <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <!-- Change the background color of the AppBarLayout so the AppBarLayout is green. 
                The toolbar is transparent by default so you will see this color through the toolbar. -->
        <item name="android:background">@android:color/holo_green_light</item>
    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="titleTextColor">#FFFFFF</item>
        <item name="navigationIconTint">#FFFFFF</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <!-- Tint the menu and overflow icons -->
        <item name="colorControlNormal">#FFFFFF</item>
    </style>

    <style name="Theme.Material3DemoApp" parent="Base.Theme.Material3DemoApp" />
</resources>

[MML-Pro]

Okay, apologies for the misunderstanding. It sounds like your trying to make all your app's toolbars green with white icons/text? Is that correct?

Looking through your sample's theme you could try:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.Material3DemoApp" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <item name="appBarLayoutStyle">@style/Widget.App.AppBarLayout</item>
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
    </style>

    <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <!-- Change the background color of the AppBarLayout so the AppBarLayout is green. 
                The toolbar is transparent by default so you will see this color through the toolbar. -->
        <item name="android:background">@android:color/holo_green_light</item>
    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <item name="titleTextColor">#FFFFFF</item>
        <item name="navigationIconTint">#FFFFFF</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <!-- Tint the menu and overflow icons -->
        <item name="colorControlNormal">#FFFFFF</item>
    </style>

    <style name="Theme.Material3DemoApp" parent="Base.Theme.Material3DemoApp" />
</resources>

Yes correct, the changes you have made is what I need, thanks, however it's look there's bug with theming toolbar itself not the appbar since the colorSurface is ignored

let's talking about the second problem is theming Contextual Action Bar, currently the same issue my custom color is not implemented, I've fixed it by used old action mode @style/Widget.AppCompat.ActionMode "I think it's material 2" Since I don't have time to create demo app from scratch to show you this problem I wanna to share my app privatly with you, Could I invite you as collaborte to my private repo and take look on it?

[hunterstich]

Okay, glad the app bar is now styled the way you want.

1. colorSurface not working Where are you trying to set colorSurface? You'd need to be setting it in a theme overlay that gets applied to either your AppBarLayout or your Toolbar

2. Contextual ActionBar theming There is a separate theme attribute that you need to override and customize to change the colors of your contextual action bar called actionModeStyle. You can see what this style looks like by default in Material3 here.

[MML-Pro]

Okay, glad the app bar is now styled the way you want.

1. `colorSurface` not working
   Where are you trying to set colorSurface? You'd need to be setting it in a theme overlay that gets applied to either your AppBarLayout or your Toolbar

I already tried to setting colorSurface on both attrs materialThemeOverlay and actionBarTheme

like this

but it's not working

the result it's still white

you can check my last update of the demo app https://github.com/MML-Pro/Material3DemoApp

2. Contextual ActionBar theming
   There is a separate theme attribute that you need to override and customize to change the colors of your contextual action bar called `actionModeStyle`. You can see what this style looks like by default in Material3 [here](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/appbar/res/values/styles.xml#L247-L252).

the second problem is solved thanks alot,there's only one thing I wanna change the navigtion icon is not changed to the white color even I set navigationIconTint to white color

[hunterstich]

I still think it'll be much easier to set android:theme="@style/ThemeOverlay.Material3.Dark on your AppBarLayout and then in that theme overlay customize appBarLayoutStyle and actionModeStyle with your custom green background styles. Then icons and everything will get tinted properly without having to override all the various component styles/attrs that control them.

There's also suggestions on how to theme and use the contextual action bar here: https://github.com/material-components/material-components-android/blob/master/docs/components/TopAppBar.md#contextual-action-bar

It looks like the contextual action bar tints the navigation icon with colorControlNormal by default. The documentation suggests you can set your own actionModeCloseDrawable in your theme and apply the tint color directly in the drawable.

[MML-Pro]

I still think it'll be much easier to set android:theme="@style/ThemeOverlay.Material3.Dark on your AppBarLayout and then in that theme overlay customize appBarLayoutStyle and actionModeStyle with your custom green background styles. Then icons and everything will get tinted properly without having to override all the various component styles/attrs that control them.

There's also suggestions on how to theme and use the contextual action bar here: https://github.com/material-components/material-components-android/blob/master/docs/components/TopAppBar.md#contextual-action-bar

It looks like the contextual action bar tints the navigation icon with colorControlNormal by default. The documentation suggests you can set your own actionModeCloseDrawable in your theme and apply the tint color directly in the drawable.

I tried to set colorControlNormal in my Contextual Action Bar theme it's not working

even after I created new drawable icon back arrow with it's default color white, not changed it's still with this color

[hunterstich]

Where are you using the Theme.App.ContextualActionBar style you made?

If that style is supposed to be a theme overlay, you can remove the parent and set things like colorControlNormal and colorOnSurface, which are theme-level attributes. If that style is supposed to be a widget style, you can set things like titleTextColor, actionModeCloseDrawable, etc. and set the style to your theme's actionModeStyle.

More info: Themes vs Styles: https://medium.com/androiddevelopers/android-styling-themes-vs-styles-ebe05f917578 Theme overlays: https://medium.com/androiddevelopers/android-styling-themes-overlay-1ffd57745207

[dailystudio]

@hunterstich

Okay, glad the app bar is now styled the way you want.

1. colorSurface not working Where are you trying to set colorSurface? You'd need to be setting it in a theme overlay that gets applied to either your AppBarLayout or your Toolbar
2. Contextual ActionBar theming There is a separate theme attribute that you need to override and customize to change the colors of your contextual action bar called actionModeStyle. You can see what this style looks like by default in Material3 here.

@hunterstich About the question 1, I have the same problem to customize my toolbar background with the attribute "colorSurface". And, the reason why we are using colorSurface is because the official document says that. Please refer to the document on MD3 repo: Theming the top app bar

I was following this document to customize my TopAppBar unsuccessfully until I found this article. I confirm that your solution works. I am not sure it is a bug of MD3 Android library or the document is incorrect. Anyway, I think it better to keep them aligned with the other one.

[RequestPrivacy]

I'm stuck at the same problem as @dailystudio: applying the above resource 1:1 doesn't change the color of the app bar.

<resources xmlns:tools="http://schemas.android.com/tools">

    <style name="Theme.App" parent="Base.Theme.App">
        <!-- Transparent system bars for edge-to-edge. -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">?attr/isLightTheme</item>

        <!-- According to the resource -->
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
    </style>

    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/md_theme_light_error</item>
        <item name="colorOnSurface">@color/md_theme_dark_onSecondary</item>
    </style>
</resources>

cutting corners seems to work somehow

<resources xmlns:tools="http://schemas.android.com/tools">

    <style name="Theme.App" parent="Base.Theme.App">
        <!-- Transparent system bars for edge-to-edge. -->
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLightStatusBar">?attr/isLightTheme</item>

        <!-- This -->
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <!-- Instead of this
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item> -->
    </style>

        <!-- No need anymore for this
    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
    </style> -->

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <item name="colorSurface">@color/md_theme_light_error</item>
        <item name="colorOnSurface">@color/md_theme_dark_onSecondary</item>
    </style>
</resources>

I'm just starting out on the platform so not sure what I'm even doing :D Any help is appreciated...

[LivingWithHippos]

I'm just starting out on the platform so not sure what I'm even doing :D Any help is appreciated...

You are overriding colorSurface and colorOnSurface for everything, not only for the app bar.

[LivingWithHippos]

I experimented a little and got some results. I'm using com.google.android.material:material:1.9.0-rc01 on android 13

Recap

Generally you can go to the theming section of a component documentation from this repository and it will explain every parameter that can/needs to be changed. The second step is checking the various "Anatomy and Key properties" section and change those values one at a time to test the results.

We can select colors in two way, directly from colors.xml -> <item name="colorPrimary">@color/two_md_theme_light_primary</item> or referring to a specific attribute -> <item name="android:background">?attr/colorPrimary</item>. Usually you create a base theme using ?attr to define which property should be applied by the theme and then extend it for every theme where you will set all the @colors As posted above you can edit icons xmls in your res/drawable folder and add properties such as android:tint="?attr/colorControlNormal" so that icons automatically inherit colors from the current theme

We can have 4 kind of bars in an application:

• Status Bar is the android system bar on top which display notifications etc.
• App Bar is your default app bar with the screen title, context menu etc (link). You can also specify one for a single screen/action, it becomes a Contextual Action Bar
• Bottom Bar is your app navigation bar if you have added one (link). They also added another version (link)
• Navigation Bar is the system bar on bottom which has the navigation buttons (back, home, recent applications)

We theme components in 3 ways

• change the value of the default property applied for that component. If I change colorPrimary it will change color for a lot of stuff
• override the style for a component directly on the theme properties in themes.xml, it will be applied to all instances of that component.
• create the style for a component but instead of applying it in themes.xml add it to a single component using the style tag. It will apply a style only to that instance of the component

Theming Bars

These are examples to force a behaviour different from the standard one. Usually you don't change all of these but set them with the theme primaryColor/Surface etc.

StatusBar

Custom background

android:statusBarColor

Icons tone

android:windowLightStatusBar

example

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.MyApp.Material3" parent="Theme.Material3.Light.NoActionBar">
        <item name="android:statusBarColor">?attr/colorPrimary</item>
        <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    </style>

Appbar

It seems we need to change some properties for the toolbar and some for the appbar.

<style name="Theme.MyApp.Material3" parent="Theme.Material3.Light.NoActionBar">
        <item name="appBarLayoutStyle">@style/Widget.App.AppBarLayout</item>
        <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
    </style>

    <!-- application bar background -->
    <style name="Widget.App.AppBarLayout" parent="Widget.Material3.AppBarLayout">
        <item name="android:background">?attr/colorPrimary</item>
    </style>

    <!-- application bar text and icons color -->
    <style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
        <!-- text color -->
        <item name="titleTextColor">?attr/colorOnPrimary</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar" parent="">
        <!-- icon color -->
        <item name="colorControlNormal">?attr/colorOnPrimary</item>
    </style>

Bottom bar

I used colorError just to test it

    <style name="Theme.MyApp.Material3" parent="Theme.Material3.Light.NoActionBar">
        <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
    </style>

    <style name="Widget.App.BottomNavigationView" parent="Widget.Material3.BottomNavigationView">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
    </style>

    <style name="ThemeOverlay.App.BottomNavigationView" parent="">
        <!-- background color -->
        <item name="colorSurface">?attr/colorError</item>
        <!-- Text and icons color (inactive) -->
        <item name="colorOnSurfaceVariant">?attr/colorOnError</item>
        <!-- icon color (active) -->
        <item name="colorOnSecondaryContainer">?attr/colorError</item>
        <!-- text color (active) -->
        <item name="colorOnSurface">?attr/colorOnError</item>
    </style>

Navigation bar

Custom background

Note: this does not work for me via xml. If I remember correctly it worked setting it with kotlin/java

android:navigationBarColor

Icons tone

android:windowLightNavigationBar

example

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Theme.MyApp.Material3" parent="Theme.Material3.Light.NoActionBar">
        <item name="android:windowLightNavigationBar" tools:targetApi="o_mr1">true</item>
        <item name="android:navigationBarColor">?attr/colorError</item>
    </style>

Contextual action bar

I don't use them so I cannot test them. I suppose it may be similar to the app bar only you override another style.

    <style name="Theme.MyApp.Material3" parent="Theme.Material3.Light.NoActionBar">
        <item name="actionModeStyle">@style/Widget.App.ActionModeLayout</item>
    </style>

    <style name="Widget.App.ActionModeLayout" parent="Widget.Material3.ActionMode">
        <item name="android:background">?attr/colorPrimary</item>
    </style>

If like for the app bar you need to also change the toolbar properties maybe you could create two different toolbar styles and apply one manually to the MaterialToolbar

themes xml

    <!-- style for app bar -->
    <style name="Widget.App.Toolbar.App" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar.App</item>
        <item name="titleTextColor">?attr/colorOnPrimary</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar.App" parent="">
        <item name="colorControlNormal">?attr/colorOnPrimary</item>
    </style>

    <!-- style for contextual action bar -->
    <style name="Widget.App.Toolbar.Action" parent="Widget.Material3.Toolbar">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar.Action</item>
        <item name="titleTextColor">?attr/colorOnPrimary</item>
    </style>

    <style name="ThemeOverlay.App.Toolbar.Action" parent="">
        <item name="colorControlNormal">?attr/colorOnPrimary</item>
    </style>

layout xml

<com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topAppBar"
                style="@style/Widget.App.Toolbar.App"

[jramism]

I am also having problems styling my background toolbar. I have followed the doc guide and using 1.9.0 and the problem still persists. Or docs are wrong or there is a bug in the lib:

This works for me (solution posted here - theming appbar and toolbar)

This doesn't work for me (docs guide - theming only toolbar)