Creating Dark Mode Splash Screen for Android

Capacitor
3

I have never created the splash images with Android Studio, so this was my work around:

In android/app/src/main/res I copied the values folder into a new folder called values-night. In my values-night folder I edited the styles.xml file to match this:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>


    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>
</resources>

The next part, which may be easier through Android Studio as @mhartington suggested, I took a different approach.

I created these folders in my android/app/src/main/res directory:

drawable-night
drawable-land-night-hdpi
drawable-land-night-mdpi
drawable-land-night-xdpi
drawable-land-night-xxdpi
drawable-land-night-xxxdpi
drawable-port-night-hdpi
drawable-port-night-mdpi
drawable-port-night-xdpi
drawable-port-night-xxdpi
drawable-port-night-xxxdpi

Within each of these folders I created a splash.png with my dark theme that matched the height x width of the splash.png filed in its accompanying folder that was created by cordova-res.

It was hacky, but it worked for me.