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:

• iOS
• 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 👍