Automatic “dark mode” for web sites

Newer versions of macOS as well as Windows 10 provide the option to use the UI in “dark mode”. In this mode the background of windows will be dark and text will be light.

Websites can support this setting as well by using the CSS media query prefers-color-scheme: dark and using a different color scheme for the “dark mode”.

As a very simplified example just to show how that works:

body {
  color: #000;
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #222;
  }
}

I added this for my own website as well:

This also revealed a bug in Firefox: for optgroup elements the given background color will be ignored if it is identical to the parent select element, but not the text color. This is also documented at Bugzilla.

I use such elements in the spoke length calculator to group rim sizes and hub types. Since all text elements where changed to be displayed in a light color, the group titles became nearly unreadable with a light grey background. As workaround I used a slightly different color for the group titles (#ffffe instead of #ffffff and #222221 instead of #222222). This is barely visible but causes Firefox to use the background color instead of ignoring it.

Leave a public comment

Your email address will not be published. This is not a contact form! If you want to send me a personal message, use my e-mail address in the imprint.

You can use the following HTML tags in the comment:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>