logoalt Hacker News

AndrewStephens • yesterday at 9:59 PM • 3 replies • view on HN

This is a good thing.

I added dark mode to my blog a while ago and it was a little trying to do properly.

You can implement a half-assed dark mode yourself by adding the following css.

  @media(prefers-color-scheme: dark) {
    body {
      filter: invert();
    }
  }
All your images will be inverted as well, which doesn’t work well for photos.

Replies

iza • yesterday at 11:42 PM

Please do not use invert; it messes up subpixel rendering, making text ugly and harder to read.

madeofpalk • yesterday at 10:04 PM

   filter: invert() hue-rotate(180deg)
For images. Works better for illustrations to get the vibe of the original colours than actual photographs.
➕ show 1 reply
sheept • yesterday at 10:04 PM

The opt outs mentioned in the article, like

    color-scheme: light dark;
should be sufficient to enable dark mode for users who prefer dark mode.

For icons, ideally they’d be SVGs controlled by currentColor, but that may not be feasible or convenient depending on your setup.