Dark mode with web standards

23 points by hongminhee

polywolf

somewhat surprisingly, the blog itself doesn't seem to have a dark mode? otherwise a good tour of the current state of things

aziis98

I've also discovered that the media attribute can also used for website "favicons" and it even automatically updates when the color scheme changes. I've use this in some sites I made (like this gruvbox midi visualizer)

<link 
    rel="icon" type="image/svg+xml" href="./icon-dark.svg"
    media="(prefers-color-scheme: dark)" 
/>
<link 
    rel="icon" type="image/svg+xml" href="./icon-dark.svg"
    media="(prefers-color-scheme: dark)" 
/>

*coff coff* I always notice that github doesn't do this and their icon goes out of sync until I reopen the tab *coff coff*

freddyb

Such a sad state, when most examples that are standard based aren’t implemented in all engines :-/

fleebee

A user might want dark mode for the UI of an application, but light mode for reading long-form text on content-heavy sites, for example

I recognize this need, but I wish there was a standardized solution to this rather than every developer cooking up their own, often unsatisfactory, scripts. It'd be nice if I could customize my Firefox toolbar to have a toggle for it, but that doesn't appear to be an option.

typesanitizer

On the topic of dark mode, I've been wanting to get different people's opinions on the interaction of code blocks & syntax highlighting with the mode. Specifically:

  1. It seems not that unusual for light background websites to have a dark background for code blocks.
  2. But naively, this seems to go against the idea of respecting the user's wishes.
  3. Personally, I have a hard time judging "good" color schemes for light mode/trouble finding the right contrast after picking some base colors for dark mode.

Are there any standards with recommendations on this topic? What are examples of websites which do this really well (esp. of you're someone who likes switching between themes)?

plop

I didn't know about the meta tag, I see the purpose (i.e. I'd prefer dark mode unless the author is strongly opinionated) but I'm not sure how a browser works actually implement that