docs(manifest): Improvements to background_color page (#36085)

* update background_color

update background_color

* update theme_color

* minor edit

files/en-us/web/manifest/background_color/index.md

@@ -7,19 +7,74 @@ browser-compat: html.manifest.background_color
 
 {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
 
-The `background_color` member defines a placeholder background color for the application page to display before its stylesheet is loaded.
+The `background_color` manifest member is used to specify an initial background color for your web application.
+This color appears in the application window before your application's stylesheets have loaded.
 
-This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
+## Syntax
 
-Therefore `background_color` should match the {{cssxref("background-color")}} CSS property in the site's stylesheet for a smooth transition between launching the web application and loading the site's content.
+```json-nolint
+/* Using named color */
+"background_color": "aliceblue"
+
+/* Using hexadecimal value */
+"background_color": "#f0fbff
+
+/* Using RGB value */
+"background_color": "rgb(240 248 255)"
+```
+
+### Values
+
+- `background_color`
+
+  - : A string that specifies a valid [color value](/en-US/docs/Web/CSS/color_value).
+
+## Description
+
+The `background_color` member serves the following purposes:
+
+- Provides a smooth visual transition from the app's initial launch to its fully loaded state.
+- Improves user experience while the app files are loading over the network or being accessed from storage media.
+- Contributes to the appearance of the splash screen in some browsers and operating systems when an installed progressive web app (PWA) is launched.
+
+It is recommended that the color value you specify for the `background_color` manifest member matches the {{cssxref("background-color")}} property value in your app's stylesheet.
+This will ensure visual consistency between the initial display (including the splash screen, where applicable) and the fully loaded application.
+By aligning these colors, you can create a more polished and seamless experience for your users.
+
+After an app has loaded, the `background-color` in the stylesheet takes precedence.
+The manifest's `background_color` is used only as a temporary measure during the initial loading phase and for generating splash screens in some environments.
 
 > [!NOTE]
-> The `background_color` member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the {{cssxref("background-color")}} CSS property when the progressive web app stylesheet is available.
+> Browsers may override the `background_color` manifest value to support any [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query defined in your app's CSS.
 
 ## Examples
 
+### Setting a consistent background color for your app
+
+Imagine you're building a weather app, and the background color in your app's stylesheet is set as shown below:
+
+```css
+body {
+  background-color: #87ceeb;
+}
+```
+
+To ensure your users see a consistent background color from launch to full load of your app, you would set the same background color in your app's manifest file like so:
+
 ```json
-"background_color": "red"
+{
+  "name": "WeatherPro",
+  "display": "standalone",
+  "background_color": "#87ceeb",
+  "theme_color": "#4682b4",
+  "icons": [
+    {
+      "src": "icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
 ```
 
 ## Specifications
@@ -29,3 +84,9 @@ Therefore `background_color` should match the {{cssxref("background-color")}} CS
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- [`display`](/en-US/docs/Web/Manifest/display) manifest member
+- [`theme_color`](/en-US/docs/Web/Manifest/theme_color) manifest member
+- [Customize your app's theme and background colors](/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors) when building PWAs

files/en-us/web/manifest/theme_color/index.md

@@ -7,25 +7,28 @@ browser-compat: html.manifest.theme_color
 
 {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
 
-The `theme_color` member specifies the default color for your web application's user interface.
+The `theme_color` member is used to specify the default color for your web application's user interface.
 This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar.
 It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen.
 
-This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode.
-
 ## Syntax
 
 ```json-nolint
-/* Valid color value */
+/* Valid named color */
 "theme_color": "rebeccapurple"
-"theme_color": "#4285f4"
+
+/* Using hexadecimal value */
+"theme_color": "#42b5f4"
+
+/* Using RGB value */
+"theme_color": "rgb(66 133 244)"
 ```
 
 ### Values
 
 - `theme_color`
 
-  - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value).
+  - : A string that specifies a valid [color value](/en-US/docs/Web/CSS/color_value).
 
     > [!NOTE]
     > Browsers may ignore the alpha component of the color based on the context.
@@ -35,6 +38,7 @@ This color application can provide a more native app-like experience for your we
 ## Description
 
 While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas.
+This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode.
 Choose a `theme_color` that aligns with your app's brand guidelines, as this can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces.
 
 In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied.
@@ -120,3 +124,4 @@ body {
 - [`display`](/en-US/docs/Web/Manifest/display) manifest member
 - [`background_color`](/en-US/docs/Web/Manifest/background_color) manifest member
 - [`scope`](/en-US/docs/Web/Manifest/scope) manifest member
+- [Customize your app's theme and background colors](/en-US/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors) when building PWAs