Re: [csswg-drafts] [mediaqueries-5] Clarification on prefers-color-scheme issues (#3278)

I imagine this feature like this:

## As a web developer...

...you are presented with 4 cases you might want to cover:

```css
@media (prefers-color-scheme: dark)
```

If your app has a dark-mode, use it.

```css
@media (prefers-color-scheme: light)
```

If your app has a light-mode, use it.

```css
@media (prefers-color-scheme: no-preference)
```

Use whatever mode you, as a developer/designer, thought of as the more suited for your app.
For an image galary app this might mean "dark".
For a text processing app this might mean "light".
Whatever you think of as the "better" mode for your app.

```css
@media (prefers-color-scheme)
```

Simply means that the webbrowser at hand supports communicating it's users color-scheme preference.
If it doesn't, you will probably want to use the same as if "no-preference" were submitted.
However you might want to use this information to conditionally show/hide manual theme-selection buttons, when the same information can be provided via the users browser.

## In a supporting webbrowser...

...I imagine there to be the following settings (maybe with per-domain overrides):

```
System
```

Forward the preferred color-scheme by the OS.
If the OS doesn't have a concept of color-schemes, set "no-preference".


```
No Preference
```

Let the website decide what is best.

```
Light
```

Send "light" as your preference.

```
Dark
```

Send "dark" as your preference.


## Closing thoughts

Remember, that you, as a developer, are always able to override the "prefers-color-scheme"-value.
For example, if the user explicitly selects a theme in your app.

This feature - at least in my eyes - is most useful to

a) get the fist time visitor directly into his favourite theme
b) have a website responding to the system color-scheme (which might depend on the time of day) and have it in sync with all other applications on the user's device


-- 
GitHub Notification of comment by freund17
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3278#issuecomment-452834498 using your GitHub account

Received on Wednesday, 9 January 2019 19:52:41 UTC