MDC: Material3 MaterialCalendar Background Color

Question

How to change Material Calendar background? I am setting a day and night theme and it is working except for the night mode where the set color background is not applied correctly.

This is the expected background color in night

This is the actual background color in night

Despite having the same value of colorSurface with regular MaterialAlertDialog, MaterialCalendar cannot follow this specific color.

<!-- DatePicker theme on both light and night mode -->
    <style name="AppCalendar" parent="@style/ThemeOverlay.Material3.MaterialCalendar" tools:keep="@style/AppCalendar">
        <!-- Background color -->
        <item name="colorSurface">@color/colorWhite_Primary</item>
        <!-- Indicator or focused field color -->
        <item name="colorPrimary">@color/colorPrimary_Accent</item>
        <!-- Day color (active) -->
        <item name="colorOnPrimary">@color/colorWhite_PrimaryDark</item>
        <!-- Day color (inactive) -->
        <item name="colorOnSurface">@color/colorPrimaryDark_White</item>
        <item name="colorOnSurfaceVariant">@color/colorPrimary_Accent</item>
        <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
        <item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.App.LargeComponent</item>
    </style>

    <!-- AlertDialog theme on both light and night mode -->
    <style name="AppDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog" tools:keep="@style/AppDialog">
        <!-- Background color -->
        <item name="colorSurface">@color/colorWhite_Primary</item>
        <!-- Message color -->
        <item name="colorOnSurfaceVariant">@color/colorPrimaryDark_White</item>
        <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>
        <item name="buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
    </style>

Usage

 <!-- Base application theme -->
 <style name="Theme.Sample" parent="Theme.Material3.DayNight">

        <item name="materialCalendarTheme">@style/AppCalendar</item>

        <item name="materialAlertDialogTheme">@style/AppDialog</item>

 </style>

To confirm if we are pointing to a correct attribute, changing colorSurface value to @android:color/holo_orange_dark will result to this.

What is the issue here and how to fix it?

Answer 1

Finally found the solution

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

https://github.com/material-components/material-components-android/issues/1133

Answer 2

You can use it

<item name="colorSurfaceContainerHigh">YourColor</item>

When examined as a source, the source code of this color

All other sources

Answer 3

<style name="ThemeOverlay.App.MaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
    <item name="colorOnPrimary">@color/white</item>
    <item name="colorPrimary">@color/blue_color</item>
    <item name="elevationOverlayColor">@color/white</item>
    <item name="elevationOverlayAccentColor">@color/white</item>

</style>