[Share] bootsplash in dark mode

[msvargas]

This is not a issue, only share to help anybody, if you want create bootsplash based on device theme.

Android:

1. create two files bootsplash.xml as in README.md but change background color
   • bootsplash_dark.xml
   • bootsplash_light.xml

example: bootsplash_dark.xml

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <!--  here change color, dark: @android:color/background_dark or @android:color/background_light -->
  <item android:drawable="@android:color/background_dark" />

  <item>
    <!-- the app logo, centered horizontally and vertically -->
    <bitmap
        android:src="@mipmap/bootsplash_logo"
        android:gravity="center" />
  </item>
</layer-list>

2. create this files in android/app/src/main/res/values/styles.xml

   <resources>
   
   <!-- Base application theme. -->
   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="android:textColor">#000000</item>
   </style>
   <!-- Add the following lines -->
   <!-- BootTheme should inherit from AppTheme -->
   <style name="BootTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
       <!-- set bootsplash.xml as activity background -->
       <item name="android:background">@drawable/bootsplash_light</item>
   </style>
   </resources>

3. Create this file in android/app/src/main/res/values-night/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>
    <!-- Add the following lines -->
    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- set bootsplash.xml as activity background -->
        <item name="android:background">@drawable/bootsplash_dark</item>
    </style>
</resources>

and MainActivity.java:

....

import android.content.res.Configuration; // check if these already import

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        int drawableId = (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
                ? R.drawable.bootsplash_dark
                : R.drawable.bootsplash_light; //Default light theme
        RNBootSplash.init(drawableId, MainActivity.this);
    }

iOS:

Setting System default color in BootSplash.storyboard > View

Thank you to this tutorial

[zoontek]

Thanks! I'm closing since it's not an issue, it will still be searchable. Maybe create a blog article too?

[msvargas]

Thanks! I'm closing since it's not an issue, it will still be searchable. Maybe create a blog article too?

Maybe, when i write blog with full example i will share here.

[alexandersandberg]

@punisher97 This is great, thanks!

@zoontek Maybe we should add a link to this in the README as dark mode is quite widely implemented nowadays? 🙂

[zoontek]

@alexandersandberg For me, what feels super slick is when you transition from your app icon to the splash screen and start animating it (like the Netflix & Twitter apps, that's the whole point of this lib). That's why I don't think splash screens should supports dark mode, but rather uses your brand colors.

But it's a totally personal opinion and as this library relies on native implementations, it's absolutely possible to do it if you want 🙂

[alexandersandberg]

@zoontek Yes, you're definitely right about that! But some also use light- and dark mode-specific branding. 🙂

Also, Apple's Human Interface Guidelines, for instance, recommends you to "Design a launch screen that’s nearly identical to the first screen of your app." (reference). If your app supports dark mode you would have to optimize this launch screen for dark mode as well.

But like you say, of course, it's an opinionated topic. 🙂

[mixmaker]

This is not a issue, only share to help anybody, if you want create bootsplash based on device theme.

Android:

1. create two files bootsplash.xml as in README.md but change background color

• bootsplash_dark.xml
• bootsplash_light.xml

example: bootsplash_dark.xml

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
  <!--  here change color, dark: @android:color/background_dark or @android:color/background_light -->
  <item android:drawable="@android:color/background_dark" />

  <item>
    <!-- the app logo, centered horizontally and vertically -->
    <bitmap
        android:src="@mipmap/bootsplash_logo"
        android:gravity="center" />
  </item>
</layer-list>

2. create this files in android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>
    <!-- Add the following lines -->
    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- set bootsplash.xml as activity background -->
        <item name="android:background">@drawable/bootsplash_light</item>
    </style>
</resources>

3. Create this file in android/app/src/main/res/values-night/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>
    <!-- Add the following lines -->
    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- set bootsplash.xml as activity background -->
        <item name="android:background">@drawable/bootsplash_dark</item>
    </style>
</resources>

and MainActivity.java:

....

import android.content.res.Configuration; // check if these already import

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        int drawableId = (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES
                ? R.drawable.bootsplash_dark
                : R.drawable.bootsplash_light; //Default light theme
        RNBootSplash.init(drawableId, MainActivity.this);
    }

iOS:

Setting System default color in BootSplash.storyboard > View

Thank you to this tutorial

I had a confusion. Where should I create bootsplash_light.xml and bootsplash_dark.xml, I mean the exact directory?

[alexandersandberg]

@mixmaker

I had a confusion. Where should I create bootsplash_light.xml and bootsplash_dark.xml, I mean the exact directory?

See this blog post that was linked at the beginning for more information.