[FIXED] Material 3 Android - dark theme uses shadows instead of lighter color elevations. Has anyone experienced this? How to solve a problem?

Issue

MaterialComponents works correctly and uses elevationOverlayColor. enter image description here But Material3... enter image description here night-theme:

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.HiNote" parent="Theme.Material3.Dark">
    <!-- 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" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
    <item name="colorOnSurface">@color/white</item>
    <item name="elevationOverlayColor">@color/primaryColor</item>
    <item name="backgroundColor">@color/backGroundDark</item>
    <item name="android:textColorHint">@color/hintTextColor</item>

</style>

<style name="Theme.HiNote.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="Theme.HiNote.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="Theme.HiNote.PopupOverlay" parent="ThemeOverlay.Material3.Dark" />

card:

<com.google.android.material.card.MaterialCardView
    android:id="@+id/note_card"
    style="?attr/materialCardViewElevatedStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="?attr/backgroundColor"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:cardUseCompatPadding="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/note_timestamp">

And the appbar is affected so I can't solve this problem for very long. Maybe there is some type of elevation so that it can be set? Maybe I'm doing something wrong?

Solution

After implementing codelab point by point, I achieved the desired result.

Answered By - NoGe4EK
Answer Checked By - Katrina (JavaFixing Volunteer)