search

unoplatform / uno

Build Mobile, Desktop and WebAssembly apps with C# and XAML. Today. Open source and professionally supported.
https://platform.uno
Apache License 2.0
8.61k stars 694 forks source link

Theme-aware splash screens #8096

Open TopperDEL opened 2 years ago

TopperDEL commented 2 years ago

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:

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 commented 2 years ago

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

See here for a real-world reference-commit.

TopperDEL commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

/cc @MartinZikmund

MartinZikmund commented 2 years ago

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

DierkDroth commented 1 year ago

@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):

MartinZikmund commented 1 year ago

@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 commented 1 year ago

@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