Re: [w3c/manifest] Add support for defining a theme color for both light & dark modes (prefers color scheme) (#975)

Thanks for filing this @jensimmons, It’s been on my backlog for a few weeks.

We discussed this over in [#955](https://github.com/w3c/manifest/issues/955#issuecomment-786852869) as well. I think the piece that’s missing from the above suggestions is that *multiple* members may need to change based on the color scheme. My original thought was that we introduce a `color_schemes` member which supports multiple color schemes [as defined by CSS](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme). That way it stay in lock-step with that spec as it continues to evolve. So, for example:

```json
"color_schemes": {
  "dark": {
    "theme_color": "#fff",
    "background_color": "#000"
  },
  "light": {
    "theme_color": "#000",
    "background_color": "#fff"
  }
}
```

Of course there’s also [`prefers_contrast`](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast) and [`forced_colors`](https://drafts.csswg.org/mediaqueries-5/#forced-colors), which we may want to consider in any solution. Perhaps, combining this idea with @mirisuzanne’s: 

```json
"color_overrides": {
  "(prefers-color-scheme: dark)": {
    "theme_color": "#fff",
    "background_color": "#000"
  },
  "(prefers-color-scheme: light)": {
    "theme_color": "#000",
    "background_color": "#fff"
  }
}
```

or 

```json
"color_overrides": [
  {
    "media": "(prefers-color-scheme: dark)",
    "theme_color": "#fff",
    "background_color": "#000"
  },
  {
    "media": "(prefers-color-scheme: light)",
    "theme_color": "#000",
    "background_color": "#fff"
  }
}
```

In terms of processing, I’m not sure which would be faster to compute. And my guess is that we’d probably want the first match to win if there are multiple matches.

Thoughts?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/975#issuecomment-833959325