Background
I'm trying to prepare dark theme for an app, and one of the requirements is to have a specific color for cards and dialogs : #ff3c454c
The problem
Whether I set it by force ( app:cardBackgroundColor="#3c454c") , by reference ( app:cardBackgroundColor="@color/...) or just in the theme - in all cases I don't get the color I've set. Instead I get the color of #525A61.
I've tested just a red color (#f00) just to be sure it affects the card, and it does, and for this color it indeed gets to be fine. But for the color I've set, it doesn't.
What I've tried
As I wrote, I tried multiple ways to set the color. In the beginning I wanted to use just the theme itself, so I've set it as such:
styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
<item name="colorBackgroundFloating">@color/colorBackgroundFloating</item>
<item name="colorSurface">@color/colorBackgroundFloating</item>
</style>
res/values-night/colors.xml
<color name="colorBackgroundFloating">#ff3c454c</color>
Later I tried to use the color directly and even set it as hard coded. Still got the incorrect color when it gets shown.
Seeing this could be a bug on the library itself, I've reported about this here (include a sample project, if you wish to check it out).
I've noticed the exact same issue occurs for BottomNavigationView and probably other similar cases.
The question
Why does it occur? Is there any workaround for this? Something that will fix it globally for all views that use these attributes ?
What you are seeing is the elevation overlay that they introduced to make elevation more noticeable while in Dark Theme, where shadows are not so visible. You can read about it here : https://material.io/develop/android/theming/dark/ in the section "Elevation Overlays"
The simple solution if you don't want this behavior is to add this to your theme.
<item name="elevationOverlayEnabled">false</item>
And you can also adjust it to another color or even a more subtle version of the overlay by changing the alpha:
<item name="elevationOverlayColor">#80FFFFFF</item>