Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(manifest): Improvements to background_color page #36085

Merged
merged 3 commits into from
Oct 2, 2024
Merged

docs(manifest): Improvements to background_color page #36085

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ded48a
update background_color
dipikabh Sep 28, 2024
c51db31
update theme_color
dipikabh Sep 28, 2024
6d312cc
minor edit
dipikabh Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 66 additions & 5 deletions files/en-us/web/manifest/background_color/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved
- 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.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved
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 only used as a temporary measure during the initial loading phase and for generating splash screens in some environments.
dipikabh marked this conversation as resolved.
Show resolved Hide resolved

> [!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
Expand All @@ -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
17 changes: 11 additions & 6 deletions files/en-us/web/manifest/theme_color/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
Expand Down Expand Up @@ -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