Dark Mode Splash Screen Support Needed

[surajSanwal]

I am implementing a dark mode feature in my app, so how to create different splash in dark mode?

[arafatzahan]

Would love to know this as well.

[gtwebsite]

In ios, you can quickly do so by using "Label color" for text/logo and background for "System background color"

[usmansbk]

Use a transparent background splash screen

[surajSanwal]

@usmansbk this is not actually the solution, this need to be proper fixing here.

[markl-vesper]

Another alternative is to force your app to Light mode via info.plist

	<key>UIUserInterfaceStyle</key>
	<string>Light</string>

[pxmage]

Here is how I did it: https://github.com/crazycodeboy/react-native-splash-screen/issues/309#issuecomment-953643219

[virtuoso1234]

@gtwebsite but with System background color, splash screen just has black/white color, how about gray/white?

[rvmaher]

For android .

paste your png in res/drawable . i am naming it splash_screen.png. create one xml file same folder named launch_screen.xml. most people makes mistake in this part. name should be this only .

my launch_screen.xml looks like this. you can design as per your convenience but attributes are must.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#FFFFFF"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/splashBg"
        android:scaleType="centerInside"
        android:src="?attr/splashImage" />
</RelativeLayout>

now under res/values create a file named attrs.xml .

<resources>
    <attr name="splashBg" format="color" />
    <attr name="splashImage" format="reference" />
</resources>

now coming to styles.xml it will look like this.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>

    <style name="LightTheme" parent="AppTheme">
        <item name="splashBg">#FFFFFF</item>
        <item name="splashImage">@drawable/splash_screen</item>
    </style>

    <style name="DarkTheme" parent="AppTheme">
        <item name="splashBg">#000000</item>
        <item name="splashImage">@drawable/splash_screen</item>
    </style>

</resources>

now final nail in the coffin.

in MainActivity.java add import android.content.res.Configuration; and

protected void onCreate(Bundle savedInstanceState)
 {
 int nightFlag = getResources().getConfiguration().uiMode &
Configuration.UI_MODE_NIGHT_MASK;
 boolean isDark =
 Configuration.UI_MODE_NIGHT_YES == nightFlag ;

setTheme(isDark ? R.style.DarkTheme : R.style.LightTheme);
         
          SplashScreen.show(this);
//rest of your code

also make sure in your AndroidManifest.xml

<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">

hope that helps