background_color

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.

Syntax

json
/* 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.

Description

The background_color member serves the following purposes:

It is recommended that the color value you specify for the background_color manifest member matches the 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: Browsers may override the background_color manifest value to support any prefers-color-scheme media query defined in your app's CSS.

Examples

undefined

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: skyblue;
}

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
{
  "name": "WeatherPro",
  "display": "standalone",
  "background_color": "skyblue",
  "theme_color": "#4682b4",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Specifications

See also