Dark mode launch screen in iOS 13

Question

I've updated my iOS app to work in dark mode on iOS 13 but I am having trouble trying to get the launch screen to look good.

Currently it is a bright white screen with the app logo which looks awful in dark mode. I have tried setting the background colour of the launch screen to be a colour asset that I made with "Any Appearance" being white and "Dark Appearance" being black - but the launch screen still always shows as white.

Is there any way to get my launch screen to work properly in dark mode?

Use `systemBackgroundColor` for the background color. No need for your own color asset. — rmaddy, Jul 04 '19 at 17:07
That worked! If you want to post it as an answer I can accept it. — Quinn, Jul 04 '19 at 17:09
@rmaddy do you know if this crashes the app on iOS 12 and below? — Ivan Ičin, Aug 20 '19 at 19:26
@IvanIčin It should not crash. Xcode seems to set the equivalent of the light mode color in the storyboard if you are supporting iOS 12 or lower. Try it and be sure. — rmaddy, Aug 20 '19 at 19:28

score 61 · Accepted Answer · answered Jul 04 '19 at 17:13

61

When setting up the Launch Screen storyboard, set the view "Background" color to "System Background Color". This will be white in light mode and black in dark mode. No need to use your own color asset.

answered Jul 04 '19 at 17:13

rmaddy

314,917
42
532
579

11

But if I want to override user interface style to dark in system light mode or override it to light when system is in dark mode. How can I implement it? The storyboard will always follow system background color so it will not be smooth. – Weslie Aug 29 '19 at 03:58
@Weslie See https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/choosing_a_specific_interface_style_for_your_ios_app?changes=latest_minor – rmaddy Aug 29 '19 at 04:06
2

Actually I know it, and I've succeeded change that programmatically. The key to the problem is that I want to change that for `LaunchScreen`, as is described in this topic. For example, when system is dark, I could override current window to light, BUT the `LaunchScreen` still remains dark. – Weslie Aug 29 '19 at 06:25
4

This is not nice, my app uses a colourful background for the light and black for the dark mode. – Pedro Paulo Amorim Oct 09 '19 at 16:31
@PedroPauloAmorim What isn't nice? There's nothing preventing you from supporting different colors. If you have a specific issue you should post your own question with all relevant details. – rmaddy Oct 09 '19 at 16:33
1

By using the `System Background Color` you are forced to set your splash screen white, you cannot change this value. – Pedro Paulo Amorim Oct 09 '19 at 16:46
Xcode should include variation based on the theme, like it does with the screen width and height. – Pedro Paulo Amorim Oct 09 '19 at 16:50
2

Also named colors are only available a prior iOS 11. – Pedro Paulo Amorim Oct 09 '19 at 16:52
@PedroPauloAmorim The use of system background color is specific to this question and answer. As I said, post your own question with your own specific details to get proper help with your issue. – rmaddy Oct 09 '19 at 16:54
5

Assuming launch screens can be only white or black is not a correct approach in my opinion. I've resolved my issue by using dynamic image assets for both background and logo. – Yusuf Kamil AK Jan 21 '20 at 07:59
This is correct but will not be sufficient if custom background colour is required. If custom colour/image is required to be used as a background on the Launch Screen then background need to be implemented using ImageView object and actual image asset (ie. 1px x 1px for flat colour) – marika.daboja Jul 28 '20 at 23:20
Hi @Weslie , have you managed to display proper `LaunchScreeen` for your app? My app supports customized appearance as well. I have no idea how to make `LaunchScreen` consistent. – JsW Aug 14 '20 at 05:23
Restart Simulator after changing the color. Sometimes it does not show the changes because of the cached Storyboard. – Rohit Singh Nov 11 '21 at 17:14

score 24 · Answer 2 · edited Aug 17 '20 at 20:29

24

I found a solution that supports earlier iOS versions as well as custom colors for each mode, dark and light, in iOS 13.

Create an image asset, set Appearances to Any, Light, Dark, and load small solid pngs with your desired colors. In this case I am using orange for light, and black for dark.

Go to your LanuchScreen.storyboard and add an image view with that image asset. Place the image behind your image logo, set Content Mode as Aspect Fill, and constrain the view to the Superview in all sides. (Make sure that your logo looks good with the two backgrounds, or set its Appearance too)
This is where I had to do a trick. For some reason, I couldn't make the back image to show up. After checking some of the comments in Launch Screen storyboard not displaying image, I added the first image in the image asset to the target bundle

The color is static in older versions of iOS, and it works well with dark and light modes in iOS 13.

edited Aug 17 '20 at 20:29

shim

9,289
12
69
108

answered Oct 18 '19 at 19:37

Jose Santos

697
1
7
10

Thanks! This was actually the best solution for my case. I support older versions than iOS11 and I also have a custom background color. – fisher Nov 29 '19 at 23:20
2

Thanks. Reboot my simulator fixed.. the LaunchScreen bug that not showing any images. – mazend Apr 08 '20 at 14:05
1

Thanks! I followed all your steps and finally I reboot my simulator then its worked. – john raja Apr 28 '20 at 06:59

score 16 · Answer 3 · answered Oct 16 '19 at 14:18

16

I was missing colors from my color palette in Xcode defaulty offered colors so I created my own using Color.xcassets where I created custom color set with appearences Any, Dark and set my colors.

Then I can use them in autolayout same like System Colors even in LaunchScreen

answered Oct 16 '19 at 14:18

MarekB

612
6
12

1

Please note that name color properties are only supported from iOS 11.0 – Manikandan Nov 21 '19 at 07:48
1

For lower version use UIImageView and 1px image for both dark and light styles. – Pedro Paulo Amorim Apr 07 '20 at 16:54
Are these images, i.e. jpgs or pngs, rather than actual UIColors? Edit: nevermind, I see you can add a color set in xcassets. – David Chopin Jan 07 '21 at 17:04
Note: I had to fully restart my device for this to take effect! – Micheal C Wallas Nov 04 '21 at 08:18
Note: like @MichealCWallas, you need to delete the app, and restart the simulator, or even executing in a new one to see the changes! – Alessandro Pace Jun 01 '22 at 21:19

score 16 · Answer 4 · answered Nov 30 '19 at 03:17

I was updating my app to support new Dark Mode for iOS 13, I put "System Background Color" for the View's background in my LanuchScreen.storyboard, but surprisingly it didn't work!

The Logo image on the page was changing correctly based on Light/Dark Mode, but not the background!

I was about to apply Jose's solution, but before that, I decided to completely remove the app from my device and try again. And it worked!!

score 8 · Answer 5 · answered Nov 19 '19 at 19:22

8

Yes Launch Screen work in dark mode, First check the background colour of your "xyz" image. if it is ok. just delete you app from device or simulator, because some time Launch Screen cached by device or simulator and you will not get the update UI on it. if you will face same problem just follow my demo app github.com/Indolia/darkmode.git

answered Nov 19 '19 at 19:22

Rishi Indolia

176
2
6

3

Without restarting the simulator none of the other answers worked. Thanks. – Brett May 20 '20 at 00:28
1

Same for me, deleting the app didn't do anything but restarting the simulator worked. – Vanessa Forney Jun 27 '20 at 06:19
I just ran the app on a new simulator , and everything worked like a charm ! Thank you . – Faisal Aug 16 '21 at 22:32

Dark mode launch screen in iOS 13

5 Answers5

Linked