Dark Mode Splash Screen

Ionic Framework
1

Does anybody have any experience with showing a black background on a splash screen if the system has dark mode turned on but a white background if it’s turned off?

Right now we’ve only been able to set one splash screen image so if the user has dark mode enabled they still get a blinding splash screen and visa-versa. I couldn’t find anything about this on Google so I figured I’d throw it in here so people searching could find out if it was possible or not.

2 Likes
2

I have it done this way…
/*

  • Dark Theme

*/

@media (prefers-color-scheme: dark) {
:root {

}

:root.ios {
–ion-background-color: #000000;
–ion-background-color-rgb: 0,0,0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;

}
}

3

The splash image is a static image. I think the only way would be to have 2 splash images with different bg and create some logic to call the correct one depending on the mode. Not sure if thats the simplest way to do it.

4

Till a better solution is available, we are using only a dark splash screen.

Bright splash-screen can look awkward in dark mode when user is in a low-light room, but dark splash-screen seems fine even if user is not using dark mode.

5

I would use [src] = “functionToGetImageDependingOnMode()”

then in your ts, use an if statement to see if document.body.classList.value === dark and return the image you want…

6

You guys should maybe read the Question correct. The Splash Screen is nothing you can change with functions, because it is displayed before you’re app even runs. I make it work, but you have to change the X-Code Project directly. First thing is that you need a LaunchScreen Splash Screen, not UiImage SplashScreen. It is possible already, and also required sometimes, but seems like Apache is working on this: https://github.com/apache/cordova-ios/issues/770 so delete the UIImages. Than you need to set theBackground of the Storyboard to SystemBackgroundColor (See here). I think it is not possible automatically at the time… Give it a Try :blush:

1 Like
7

Since cordova-ios@6.1.0 you can add a dark Mode Splash Screen Image for iOS: https://cordova.apache.org/announcements/2020/06/23/cordova-ios-6.1.0.html

8

Android is also possible. Check out me comment here: https://github.com/apache/cordova-plugin-splashscreen/issues/246#issuecomment-670423221