Merge pull request unoplatform#15244 from unoplatform/dev/lubl/splash-2

docs: Add wasm manifest content to splash screen feature docs
ramezgerges · Jan 31, 2024 · e3b635d · e3b635d
2 parents ac4f9bf + 021fab4
commit e3b635d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 44 deletions.
diff --git a/doc/articles/splash-screen.md b/doc/articles/splash-screen.md
@@ -150,46 +150,48 @@ While the new templates simplify adding a splash screen, this article covers how
 
 * The default splash screen configuration for WebAssembly is to use the Uno Platform logo as a placeholder
 
-* In the `.Wasm` project, navigate to `WasmScripts/AppManifest.js`
+* An `AppManifest.js` file contains settings for your WebAssembly application, including properties to customize its splash screen. This file is found in the `[AppName].Wasm` project, typically located at `WasmScripts/AppManifest.js`.
 
-  * Customize the splash screen image and background color by setting the following properties related to splash screens
+#### General properties
 
-#### Standard properties for splash screens
+You can customize the splash screen image and background color by adjusting several key properties:
 
-| Property | Description | Notes |
-|----------|-------------|-----|
-| `splashScreenImage` | Location of the splash screen image. | You currently need to set an explicit scale for the image |
-| `splashScreenColor` | A background color for the splash screen. | Any values assigned to the theme-aware properties are ignored unless this property is set to `transparent`. <br><br>If the theme-aware properties are unassigned, the default browser background color will be used instead. |
+  | Property | Description | Notes |
+  |----------|-------------|-----|
+  | `accentColor` | Color of the progress indicator's filled-in portion displayed during application launch | Default value is `#F85977` |
+  | `displayName` | Default name visible in the browser window's title to represent the application | N/A |
+  | `splashScreenColor` | Background color of the screen displayed during application launch | Any values assigned to the theme-aware properties are ignored unless this property is set to `transparent`. <br><br>If the theme-aware properties are unassigned, the default browser background color will be used instead. |
+  | `splashScreenImage` | Path to an image that will be visible on the screen displayed during application launch | You currently need to set an explicit scale for the image |
 
-* Example:
+  > [!TIP]
+  > `splashScreenColor` allows you to maintain a background color regardless of the system theme. However, a simple method to make the splash screen theme-aware is to assign `transparent` as its value or by omitting that property altogether.
 
-    ```js
-    var UnoAppManifest = {
-        splashScreenImage: "Assets/SplashScreen.scale-200.png",
-        splashScreenColor: "transparent",
-        displayName: "SplashScreenSample"
-    }
-    ```
+#### Theme-aware properties
 
-    > [!NOTE]
-    > The section below contains optional properties. If nothing is assigned to them, the value of `splashScreenColor` will be used under both themes as the background color.
-    >
-    > [!TIP]
-    > The `splashScreenColor` property allows you to set the background color for the splash screen. If you want to make the splash screen theme-aware, you must either omit this property or set it to `transparent`.
+  > [!NOTE]
+  > The section below contains optional properties. If nothing is assigned to them, the value of `splashScreenColor` will be used under both themes as the background color.
 
-* Uno Platform supports theme-aware backgrounds as an optional customization for splash screens.
+  Uno Platform supports theme-aware backgrounds as an optional customization for splash screens. Set the following properties to adjust the splash screen based on a system theme:
 
-  * You can set the `darkThemeBackgroundColor` and `lightThemeBackgroundColor` properties to adjust the background color for each theme.
+  | Property | Description | Notes |
+  | --- | --- | --- |
+  | `lightThemeAccentColor` | Color of the progress indicator's filled-in portion displayed during application launch if a system light theme is enabled | Default value is `#F85977` |
+  | `darkThemeAccentColor` | Color of the progress indicator's filled-in portion displayed during application launch if a system dark theme is enabled | Default value is `#F85977` |
+  | `lightThemeBackgroundColor` | Background color of the screen displayed during application launch if a system light theme is enabled | Default value is `#F3F3F3` |
+  | `darkThemeBackgroundColor` | Background color of the screen displayed during application launch if a system dark theme is enabled | Default value is `#202020` |
 
-#### Optional: Properties for theme-aware splash screens
+* Code example:
 
-| Property | Description | Notes |
-|---------------------------|-------------|-----|
-|`lightThemeBackgroundColor`| Splash screen background to be used if a system light theme is enabled. | Default value is `#F3F3F3` |
-|`darkThemeBackgroundColor` | Splash screen background to be used if a system dark theme is enabled.  | Default value is `#202020` |
+  ```javascript
+  var UnoAppManifest = {
+      splashScreenImage: "Assets/SplashScreen.scale-200.png",
+      splashScreenColor: "transparent",
+      displayName: "SplashScreenSample"
+  }
+  ```
 
 ## See also
 
 * [Completed sample on GitHub](https://github.com/unoplatform/Uno.Samples/tree/master/UI/SplashScreenSample)
-* [Ask for help on our Discord channel](https://www.platform.uno/discord)
+* [Ask for help on Discord](https://www.platform.uno/discord)
 * [Uno.Resizetizer repository](https://github.com/unoplatform/uno.resizetizer)
diff --git a/doc/articles/wasm-appmanifest.md b/doc/articles/wasm-appmanifest.md
@@ -4,31 +4,31 @@ uid: Uno.Development.WasmAppManifest
 
 # AppManifest for WebAssembly head project
 
-The `AppManifest.js` file contains settings for your WebAssembly application. It's normally located in the `[AppName].Wasm` project under the `WasmScripts` folder.
+The `[AppName].Wasm` project in your solution typically includes a manifest file containing settings for the WebAssembly application. This file is typically generated for you under `WasmScripts/AppManifest.js`.
 
 ## AppManifest properties
 
-The properties are :
+This app manifest file allows you to customize certain aspects of the WebAssembly application, including its loading screen. This loading UI is often referred to as the "splash screen" in documentation. For more information, see [How to manually add a splash screen](xref:Uno.Development.SplashScreen#5-webassembly).
 
-* **splashScreenImage**: defines the image that will be centered on the window during the application's loading time.
-* **splashScreenColor**: defines the background color of the splash screen.
-* **displayName**: defines the default name of the application in the browser's window title.
+## Add a missing manifest file
 
-## Add a missing manifest
+If you created an application without using the default Uno [templates](xref:Uno.GetStarted.dotnet-new), you may need to add the manifest file manually.
 
-If you created an application without using the default Uno templates, you may need to add the manifest file manually.
+To do this, create a folder named `WasmScripts` in your `[AppName].Wasm` project, with a file containing the JavaScript code below
+(e.g. `AppManifest.js`).
 
-In your WASM head, create a folder named `WasmScripts`, with a file containing the JavaScript code below
-(e.g. `AppManifest.js`) and the `Embedded resource` build action.
-
-The manifest file should contain the following:
+Set the manifest file's build action to `Embedded resource`, and edit the contents of this file to resemble the following:
 
 ```javascript
 var UnoAppManifest = {
-
-    splashScreenImage: "Assets/AppSplashScreen.scale-200.png",
-    splashScreenColor: "#3750D1",
-    displayName: "My Sample App"
-
+    splashScreenImage: "Assets/SplashScreen.scale-200.png",
+    splashScreenColor: "transparent",
+    displayName: "SplashScreenSample"
 }
 ```
+
+## See also
+
+- [WebAssembly: Supported AppManifest properties](xref:Uno.Development.SplashScreen#5-webassembly)
+- [Deep-dive: How Uno works on WebAssembly](xref:Uno.Contributing.Wasm#web-webassembly)
+- [Get Started: Get the Uno Platform templates](xref:Uno.GetStarted)