Web Manifest files include a background_color
key which is used in the splash screen for installed PWAs. However, if the color chosen is bright or white, it would not mesh well with system or site UI for users who use a dark theme, and the same can be said about sites with dark backgrounds and users with light themes. The specification says that user agents may modify or override the color, but I think there should also be a way to explicitly specify a color per theme. This also applies to a lesser extent to theme_color
, but that can be overridden with JS on a page-by-page basis so it’s not as much of an issue. One way this could be handled is by having a color_scheme_overrides key, resulting in JSON like the following.
{
"background_color": "#13c6dd",
"color_scheme_overrides": {
"background_color": "#185d66"
}
}
Dark variants of icons could also be supported by adding another key, resulting in something like the following.
{
"icons": [
{
"src": "icon/light.png",
"sizes": "192x192",
"type": "image/png",
"color_scheme": "light"
},
{
"src": "icon/dark.png",
"sizes": "192x192",
"type": "image/png",
"color_scheme": "dark"
}
]
}