~bfiedler/website

d29c53b20f514582a7c4a0010145e3ca725539df — Ben Fiedler 3 months ago c2083cc
Add note about meta tag color-scheme
1 files changed, 24 insertions(+), 7 deletions(-)

M content/blog/css-prefers-color-scheme.md
M content/blog/css-prefers-color-scheme.md => content/blog/css-prefers-color-scheme.md +24 -7
@@ 32,11 32,11 @@ browsers](https://caniuse.com/prefers-color-scheme), simply marvelous.

Using this feature is as simple as adding a media query to your styling. Using
[CSS custom properties](https://www.w3.org/TR/css-variables/) ("variables"), all
you need to do is define the appropriate colors and you're good to go.
you need to do is define the appropriate colors and you're good to go. 

```
@media (prefers-color-scheme: light) {
    // light styling (default, or user has no preferencce)
```css
@media (prefers-color-scheme: light) { // the default if no preference set
    // light styling
}

@media (prefers-color-scheme: dark) {


@@ 44,12 44,29 @@ you need to do is define the appropriate colors and you're good to go.
}
```

The `prefers-color-scheme` still has one drawback: correct page rendering must
be delayed until CSS is downloaded and parsed, and might cause flickering on
slow connections, when the browser defaults to a white background but the user
prefers dark mode for example. Using the `color-scheme` meta tag, the webpage
can immediately signal which themes it supports, and the browser can react by
styling the background dark immediately, before applying CSS, which prevents
the aforementioned flickering. The first named theme is the author's preferred
default, which the browser can respect if the user has not given an explicit
preference.

```html
<!-- supports light and dark mode, defaults to light mode-->
<meta name="color-scheme" content="light dark">
```

# Trying it out

This website fully supports theme selection based `prefers-color-scheme`, try it
out! It even inverts images[^2] to perfectly match your preferred style, a
feature I'm very proud of, even if it is virtually invisible (since almost
nobody looks at both styles).
nobody looks at both styles). See the
[website's source](https://git.sr.ht/~bfiedler/website) to see the actual SCSS
source files.

On desktop browsers you can test it using the developer tools
([Firefox](https://stackoverflow.com/a/60481298/),


@@ 66,8 83,8 @@ user-friendly theme support.

If you have a personal blog, product or company website or any other side,
consider adding support for `prefers-color-scheme` to your theme. Even though it
has no impact on the majority of people, we ultimately design our products to
be as user-friendly as possible. Right?
has no impact on the majority of people, we ultimately want design our products
to be as user-friendly as possible. Right?

[^1]: Bonus question: server time or client time? One is inaccurate for large parts
  of your visitors, the other one requires JavaScript.