Dark theme for web manifest properties

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"
    }
  ]
}
2 Likes

There have been quite some discussions about dark mode support over on the W3C GitHub repo for the Web App Manifest spec. Ideally the conversation continues there.

1 Like