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

Nobody has claimed this yet.

**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][1] 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][2]
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

```
#1aae66
#5ee194
#007d3a

#1de9b6
#6effe8
#00b686

@color/white
#000000
```

colors night

```
@color/darker
@color/darkGray
@color/black

#4db6ac
#82e9de
#00867d

```

**theme.xml (light version)**

```

<!-- 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>

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

<item name="colorSurface">@color/primaryColor</item>
<item name="colorOnSurface">@color/primaryDarkColor</item>

```

**theme.xml (night version)**

```

<!-- 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>

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

<item name="colorSurface">@color/primaryColor</item>
<item name="colorOnSurface">@color/primaryDarkColor</item>

```

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

```

This won't work
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:title="Post details" />

```

## The Second Problem

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

`@color/contextualActionBarColor`

it should be my dark black color but it's notworking/ignored, the other attribute **actionModeTheme** with ` @style/ThemeOverlay.Material3.Dark.ActionBar` it uses the main primary color green for action bar

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

[![enter image description here][3]][3]

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

[![enter image description here][4]][4]

[1]: https://issuetracker.google.com/issues/249434847
[2]: https://m3.material.io/components/top-app-bar/implementation
[3]: https://i.stack.imgur.com/XumTn.jpg
[4]: https://i.stack.imgur.com/CD56z.jpg

**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](https://github.com/material-components/material-components-android/releases) of the library.

We also happily accept [pull requests](https://github.com/material-components/material-components-android/pulls).

Start with the provided Material 3 top-app-bar implementation and the XML styles for Widget.App.Toolbar, ThemeOverlay.App.Toolbar, actionBarTheme, and actionModeBackground. Reproduce the behavior with the stated Material library versions, then trace how MaterialToolbar and contextual action mode resolve these attributes. Done means custom colors apply correctly to both the top app bar and contextual action bar, with regression coverage for the reported setup.

Written by the indexing model from the issue text.