Creating Dark Mode Splash Screen for Android

Capacitor
1

I’m looking for some documentation or examples for creating dark mode splash screen assets for Android. I create my resources using the cordova-res tool, so I am not sure if there is a built-in workflow with that tool to accomplish this, or if like with Xcode, you need to make some adjustments in Android Studio in order to have the different splash screens for the app.

Any input or direction would be much appreciated.

2

With the hard coded pngs from cordova-res, it might not be possible. But if you make the launch images within android studio, you should be able to do so

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.

4

I tried your solution but the dark mode version of my styles works in a different way even thought the style (in my case) it’s the same… the background color of the splash is a default light blue that i can’t find a way to change. Any idea why?

5

I have ditched cordova-res for capacitor-assets. Check it out and it can help with the dark mode screen generation:

6

Thanks for your feedback. I fixed my issue, the new splash screen configuration isn’t really straightforward

7

The configuration from capacitor-assets or my solution above?

8

I had to create a “night” version of the “values”, no need to create all those drawable folders. Now my problem is with the app icon that on some devices look different as it should, like zoomed.

Unfortunately, I can’t install capacitor/assets on mac m1, I opened a ticket because I have an error…

I’m using this website https://icon.kitchen/ to generate the app icons but when i do that, after the splash screen is dismissed, I have a black screen for a moment. Any idea why it happens?