Why no one uses @media (prefers-color-scheme: dark)?

Wed, 15 Nov 2023 22:50:00 +0300

I don’t get it - it’s the simplest way to enable dark mode for your website that works across all platforms. It works on Linux, Android, MacOS, iOS, and maybe even on Windows (I didn’t test it, I have no Windows). I see websites that either use JS to do that or do no dark mode at all.

Some time ago I started using the Stylus extension for Firefox to override CSS for websites that don’t do the dark mode. And you know what? For a quick fix for most pages, it is as simple as:

@media (prefers-color-scheme: dark) {
    html { filter: invert(100%) hue-rotate(180deg); }
    img { filter: invert(100%) hue-rotate(180deg); }
}

Yes, this introduces problems on some pages, for example, embedded videos, especially YouTube ones are hard to invert back. Images may look horrific if they’re done with something else than the img tag, gradients and colors are preserved but shadows are still inverted, and so on. But if you have a web page on the web it is you who can do it right, so I don’t have to fix it for myself.

@media (prefers-color-scheme: dark) {
  body, textarea { color: #dedddc; background-color: #1e1e1e }
  code { background-color: #2b2b2b; color: #dedddc; }
  pre code { background-color: #ddd; color: #333; }
  kbd { background-color: #161b22; color: #dedddc; border: solid 1px rgb(57, 63, 71); border-bottom-color: rgb(37, 43, 51); }
  tbody tr:nth-child(2n+1) td, tbody tr:nth-child(2n+1) th { background-color: #212121; }
  table { border: 1px solid #333; }
  td, th { border: 1px solid #333; }
  .post-list { h1 a { color: #dedddc; &:hover { color: #7a5fa4; } } }
  a { color: #7a5fa4; &:hover { color: #7a5fa4; } }
  header h2 { a { color: #86868e !important; &:hover { color: #7a5fa4 !important; } &:active { color: #7a5fa4 !important; } } }
  blockquote { border-left: .25em solid #424242; color: #bebebe; }
  .org-svg { filter: invert(90%); }
  .invertable { filter: invert(100%) hue-rotate(180deg) contrast(79%); }
  .highlight { filter: invert(100%) hue-rotate(180deg) contrast(110%); scrollbar-color: #9c9c9c #ddd; background-color: #ddd; }
  .title-group { .title { a { color: #dedddc !important; &:hover { color: #7a5fa4 !important; } &:active { color: #7a5fa4 !important; } } } }
  input, input[type=file], button { background-color: #161b22; color: #dedddc; border: solid 1px rgb(57, 63, 71); }
  .diff-added { background-color: #e2c3da; }
  .diff-removed { background-color: #9fe0d6; }
}

This is all it takes to make dark mode for this page and the rest of the site. Yes, I use some filter attributes for specially constructed images and code, and yes, some browsers may not support it, but it generally works well.

I’m bringing this up not because I’m some freak who wants dark themes everywhere - no. My PC switches to the dark theme in the evening automatically to be easier on the eyes with the overall brightness, and when I open some web page it often blinds me with a white background. Not only it is unpleasant, but it is also bad for your health, as at the end of the day your body is more relaxed, and a sudden flash of light forces your eye muscles to suddenly contract. It’s advised not to look at the screen for several hours before bedtime, but I have a lot of work to do after work, so I can’t really afford that.

I don’t browse the web that much, but have a look at the pages I did adjust because I refer to them fairly often:

Most of these are static pages.

Is it that hard to add a single @media (prefers-color-scheme: dark) {...} block to the style file?

Well, I’m not a web developer. I don’t know your ways and such. You can say that your pages are complicated, your stylesheets are complex and generated with some preprocessor, or you’re using some framework that doesn’t allow you to do that or whatnot.

I’ll happily take even the stupid invert filter - as long as it is easy on the eyes I’m good. And yes, there are ways of forcing dark mode on everything, so I guess you can pretend there is no issue here, but it is not true.

Dark mode makes it easier to read stuff in the dark without causing too much eye fatigue - that’s the whole point. Tone your colors down a bit, bring the contrast down so the light text isn’t cutting the eyes against a pure black background and you’re good. And please, don’t use JS for that, or at least consult¹ with the prefers-color-scheme query, so that your JS code synchronizes with my system-wide preferences.

Please add dark mode to your static pages. It’s not that hard.

The stackoverflow was painfully bright at the time of writing this post ↩︎

Comment via email

Andrey Listopadov

Why no one uses @media (prefers-color-scheme: dark)?