Dark mode in a website with CSS | Tom Brow


34 bookmarks. First posted by sprice 15 days ago.


@media (prefers-color-scheme: dark) {}
accessibility  code  css  ui  webdev 
9 days ago by mirthe
Dark mode in a website with CSS | Tom Brow
from twitter
12 days ago by jackysee
This page has a dark mode. Try it! Supporting prefers-color-scheme was easy, though there were a couple surprising details to address.
css  darkmode 
14 days ago by geetarista
This site has a dark mode and a light one. Which mode you see depends on the setting of your device. -- css howto included
design  howto  css 
14 days ago by masukomi
@media (prefers-color-scheme: dark) {
body {
background-color: #444;
color: #e4e4e4;
}
a {
color: #e39777;
}
img {
filter: grayscale(30%);
}
}
css  darkmode  ux  design  accessibility 
15 days ago by leviathant
jus' like a media breakpoint
code  accessibility  reference  css  webdev  ui  ux 
15 days ago by inrgbwetrust
Quick and easy way to get started with Dark Mode on the web.
accessibility  code  css  ui 
15 days ago by robknight
This page has a dark mode. Try it! Supporting prefers-color-scheme was easy, though there were a couple surprising details to address.
css  web 
15 days ago by vkitchen
Tom Brow →

Dark mode in a website with CSS

September 27, 2019

This site has a dark mode and a light one. Which mode you see depends on the setting of your device. Try it!

The instant change in appearance is accomplished by this appendix to the style sheet:

@media (prefers-color-scheme: dark) { body { background-color: #444; color: #e4e4e4; } a { color: #e39777; } img { filter: grayscale(30%); } }

This works in Firefox, Safari, and Chrome among other browsers.

Light on dark

The most important block is the one that overrides the colors of text and the background:

body { background-color: #444; color: #e4e4e4; }

It's recommended to avoid pure white for text, and I chose likewise to avoid pure black for the background.

Desaturate colors

The accent color I use for hyperlinks looked harsh on the dark background, so I overrode it with a less saturated one:

Photographs also looked harsh. It turns out that many people prefer images, too, to be desaturated in dark mode:

img { filter: grayscale(30%); }

You may want to use a more specific selector here in order to treat vector images differently.

Read more

All the above is distilled from Hello darkness, my old friend by Thomas Steiner, which also contains a fascinating history of display color schemes:

With the advent of more sophisticated WYSIWYG desktop publishing, the idea of making the virtual document resemble a physical sheet of paper became popular…

The first ever browser, WorldWideWeb, displayed webpages this way. Fun fact: the second ever browser, Line Mode Browser—a terminal-based browser—was green on dark.

If you'd like to hear about other projects of mine, subscribe to my newsletter!
IFTTT  Feedly  Hackernews 
15 days ago by walt74