Theme-aware splash screens

[TopperDEL]

What would you like to be added:

Provide sample/documentation/templates for supporting light and dark themes on splash-screen-level. According to @MartinZikmund this should at least be possible for Android, iOS and ~WASM~ (already supported).

Why is this needed:

If an App supports dark mode, it should do it from the beginning. Flashing the user with a white splash screen isn't very polite. :)

For which Platform:

• [X] iOS
• [X] Android
• [?] WebAssembly
• [ ] WebAssembly renderers for Xamarin.Forms
• [?] macOS
• [?] Skia
  • [ ] WPF
  • [ ] GTK (Linux)
  • [ ] Tizen
• [?] Windows
• [ ] Build tasks
• [ ] Solution Templates

Anything else we need to know?

These links might help: https://codetraveler.io/2019/10/11/creating-a-dark-mode-splash-screen/ https://stackoverflow.com/questions/56892053/dark-mode-launch-screen-in-ios-13

[TopperDEL]

A qucik description for Android, coming from the Uno-Templates:

• Copy "Resources/drawable/splash.xml" to "Resources/drawable/splash_light.xml"
• Set the values for the dark mode in "splash.xml" and for light mode in "splash_light.xml"
• Add a new folder "Resource/values-night" copying the content from "Resources/values"
• Reference the relevant "splash" or "splash_light" in the Styles.xml underneath "values" and "values-night"
• Add "Theme = "@style/AppTheme" to the MainActivity

See here for a real-world reference-commit.

[TopperDEL]

On iOs it is as simple as using the "System Background Color" as Background for a view. This switches automatically from black to white. I had two problems with the SplashScreen on iOs, though: first, the SplashScreen-image from the Shared-Asset-Folder could not be loaded. I had to add an explicit "iOsSplashScreen.png" to the iOs-Head-Resource-folder. Second I needed to set the "Is initial View Controller"-Flag on the Splash.storyboard. Otherwise it would not get loaded - might be clear if you know it. But I've not worked with storyboards before, so this was quite a steep learning curve. :)

This is the real-world reference-commit for iOs.

And this is the update to the doc, hopefully helping others in my situation.

[mmarinchenko]

Hi, guys!

I just read the article on Uno Blog - https://platform.uno/blog/theme-aware-splash-screen-in-uno-platform-webassembly.

The accentColor property should also have light/dark variants in AppManifest.js and be mentioned in docs. It is used for progress bar.

Uno Platform

Theme-Aware Splash Screen in Uno Platform WebAssembly

Adding theme support to WebAssembly applications

[jeromelaban]

/cc @MartinZikmund

[MartinZikmund]

@mmarinchenko Good idea! Will make sure to add it in the next batch of updates 👍

[DierkDroth]

@MartinZikmund @jeromelaban as I was trying to make the splash screen experience fully theme-aware I ran into these issues (not sure how many of those are covered yet by improvements around bootstrap 8.X):

• there are actually 2 splash screen instances active including an unfavourable flashing experience in between - which is not optimal: one is set in index.html and another one in AppManifest.js
• sizing/scaling of both instances is different (could be made identical though as per @MartinZikmund's recommendation here - this is just just more work)
• I needed to have an application-theme dependent background color - black/white as per Windows default for dark/light is nice, but does not get me there 100%
• finally I needed to have a theme dependent logo file (PNG, SVG ...) since that would be different based on the actual theme. I might be able to apply theme dependent logo-switching to index.html (have not tried though), but I don't think this is possible at all with AppManifets.js - please correct me if I'm wrong

[MartinZikmund]

@DierkDroth issues 1 and 2 should be fixed when you use the 8x bootstrapper and latest versions of Uno

For 3 - not sure which background are you referring to - Window, Page or Splash? It should now be aligned properly though. For splash background theming I added that option in app manifest before

4 - good idea to offer an option to provide different images, it would align with Windows where this is possible too. Can you open an issue on the bootstrapper repo?

[DierkDroth]

@MartinZikmund thanks for follow up

Window, Page or Splash

oops .. you're loosing me on this one. I was refering to the background of the splash screen on UNO WASM.

For splash background theming I added that option in app manifest before

Hmm .. that is static as it would be hard coded in AppManifest.js .. and could be transparent as you pointed out in one of your blogs a while back. But that's not my point: I was looking for setting a color in case the OS Theme is dark and a different color if the OS theme is light. So, not going with BLACK and WHITE which I see on Chrome for Windows DARK/LIGHT, but a theme-dependent custom color.

Can you open an issue on the bootstrapper repo?

Done

[trydalch]

Now how do we do this with apps that use the single project architecture? I need to do this for iOS, but can't see how.