I'm trying to change the background color of the top bar and make it like the main background. I'm using

As you can see the background color of the top bar must be #1A1C19 but it became #222E22, From where did the #222E22 come?

I tried to find anything talking about this inside MD3 documentation, But did not find anything. Could you tell me why the color is changing automatically?

Note: If I changed md_theme_dark_background from #1A1C19 to #1A1C18, The background color of the top bar will be the same as the main background and will not change. But when return it to #1A1C19 it will convert it to #222E22.

Is this normal behavior or it is a bug?

Thank you.

CodePudding user response：

The different color is due to elevation overlay. You can either remove the elevation or disable the elevation overlay.

To disable elevation overlay in the theme add this line in your theme :

<item name="elevationOverlayEnabled">false</item>

To disable it only for the materialToolBar :

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

<style name="ThemeOverlay.Card" parent="ThemeOverlay.Material3.Toolbar.Surface">
    <item name="elevationOverlayEnabled">false</item>
</style>

Then add this line in your materialToolBar xml code :

style="@style/Card"