Theme-Aware Splash Screen in Uno Platform WebAssembly

12 Apr 2022

We’re always keeping an ear out for feature requests, bugs, and issues raised by the community so we can continue to better improve Uno Platform. So when @TopperDEL brought up a great question about the possibility to use theme-aware splash screens on Uno Platform Discord channel, Martin Zikmund was quick to offer a solution.

Splash Screen

A “Splash Screen” is the first image or page displayed when you first load your application, while the application is initializing. The splash screen remains visible until the first page of the application is ready to display. Unlike iOS, Android and Windows, WebAssembly does not yet support theme respecting splash screens.

For those interested, the PR can be seen here. And now, with the stable release of Uno.Wasm.Bootstrap 3.3.1 it can be used in all Uno Platforms apps literally with a single line change!

Here’s How To Do It
Open the AppManifest.js file in the WasmScripts folder of the WASM project in any Uno Platform app solution and either set the splashScreenColor to transparent or delete the property entirely:

				
					var UnoAppManifest = {

    splashScreenImage: "Assets/SplashScreen.png",
    splashScreenColor: "transparent",
    displayName: "Theme-aware splash screen"

}

And voilà! The splash screen will now match the theme of your OS or browser!

Note: To achieve the same effect in UWP/WinAppSDK the exact same change is required in the app’s Package.appxmanifest – setting transparent Splash screen background on the Visual Assets tab.

Customizing Themed Color

By default, the background color of the splash screen matches the light/dark background of WinUI 2.6 and higher. However, you can even customize to match your own liking with the darkThemeBackgroundColor and lightThemeBackgroundColor properties. For example, if you wanted the background blue in dark theme and yellow in light theme, you could do it like this:

				
					var UnoAppManifest = {

    splashScreenImage: "Assets/SplashScreen.png",
    splashScreenColor: "transparent",
    displayName: "Theme-aware splash screen",
    darkThemeBackgroundColor: "blue",
    lightThemeBackgroundColor: "yellow",

}

In Uno Platform WebAssembly apps, creating a theme-aware splash screen is now a breeze. The same feature will be implemented across all remaining platforms, and you can keep track of the project’s development at This GitHub issue.

A good App should immediately present useful content, even if it means using gray areas as we do on the Web, it gives the impression of greater responsiveness.

Next Steps

For better discoverability and ease of adopting Uno we have brushed up and published various working examples for Uno Platform, ranging from small single-feature samples to larger showcase applications. If you are new to Uno Platform, the best way to get started is to follow our official getting started guide.