Dark Theme with Bottom Navigation View

Question

I am trying to make a day-night theme for my app. I am having troubles making the bottom navigation view switch from the white Background to black bg automatically.

This is my bottom navigation code,

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@android:color/white"
        app:itemIconTint="@drawable/bottomnavstate"
        app:itemTextColor="@drawable/bottomnavstate"
        app:menu="@menu/bottom_navigation_main" />

It is recommended to have a white background to get a ripple effect on press.

My theme is as follows:

<style name="AppTheme" parent="Theme.AppCompat.DayNight">
    <item name="android:colorPrimary">@color/primaryColor</item>
    <item name="android:colorPrimaryDark">@color/primaryDarkColor</item>

    <item name="android:colorAccent">@color/accentColor</item>

    <item name="colorControlHighlight">@color/accentColor</item>

    <item name="android:windowLightNavigationBar">true</item>
    <item name="android:navigationBarColor">@android:color/background_light</item>
</style>

Things I have tried:
1. Added a new theme extending from the app theme, as follows

 <style name="BGTheme" parent="AppTheme">
        <item name="android:background">@android:color/white</item>
    </style>

Added that theme to the bottom nav widget but I see a weird ripple effect, which extends beyond the nav bar, the bottom nav bar loses its elevation as well.

Any solutions?