24 votes

In search of the dark mode holy grail

I've been thinking a lot about dark mode lately, now that macOS and Windows 10 both officially offer some implementation of it. I think dark modes make a compelling case for eye strain prevention, but the dealbreaker for me is revealed when switching between apps and one of them isn't dark. That jarring flash of bright light completely ruins whatever gentleness the dark environment provided in the first place. So despite my curiosity I've kept everything in light mode for years, tempered by f.lux to keep myself sane after sundown.

Anyway, now that there's official OS support I'm reconsidering. I think there's a growing pro-dark movement that was just waiting for that formal recognition. Today the programs I use most all offer dark modes so I'm taking an experimental plunge. My goal: 90% elimination of white flashes while in my normal workflow.

The biggest obstacle is, not surprisingly, the web. There are some beautiful dark browser themes available but that really only affects the UI elements around the page, not the page itself. I want to darken the web too. I have a few thoughts about this:

  • Plugins like this one try to automate a dark mode for every site you visit. This is hit-or-miss, resulting in ugly color combinations, sometimes unreadable text. Some methods just invert the page colors, which can lead to all sort of other visual wonkiness. I haven't found a plugin like this that isn't fiddly and annoying.
  • This plugin looks interesting. From what I can tell, it uses some kind of server-side heuristics to determine the optimal way to darken every page you visit. I haven't actually tried it because I'm concerned about the privacy/security implications of sending all my web activity to this unknown third party. Or what kind of performance hit that would involve. Also, they bury this information on their site, but this is a paid service with an annual subscription.
  • I'm aware of Stylish and its huge library of user-maintained custom site styles. This seemed like a good approach, except that following a recent acquisition, the new owners of Stylish betrayed their users' trust in a very shady way so I'm afraid to go near it now. If there's a credible alternative with a decent style library I'd love to know about it. Especially if there's a way to automate style application so I don't have to manually activate it for every site I visit.
  • Tangentially, the W3C is having an interesting conversation about adding CSS media query support for recognizing user dark-mode preferences. This could absolutely be the future of the web(!!), but I suspect it won't because it puts the responsibility on designers to basically double the amount of work they have to do. Speaking as someone in that field, I would not want to have to add this to my already-long list of design considerations.

Are there any other good web darkening methods I've overlooked? How do you deal with the white flash problem? Should I just give up and go back to black-on-white? Interested in any and all thoughts on the matter.

16 comments

  1. [3]
    Comment deleted by author
    Link
    1. [2]
      balooga
      Link Parent
      Ah, thank you! I'll give that a look.

      Ah, thank you! I'll give that a look.

      5 votes
      1. Exalt
        Link Parent
        I used Stylish briefly before switching to Stylus after hearing about the shady history. It's the same, you can even use userstyles.org and openusercss.

        I used Stylish briefly before switching to Stylus after hearing about the shady history. It's the same, you can even use userstyles.org and openusercss.

        11 votes
  2. tomf
    Link
    Stylus is great, but for dark themes, you'll have to make a lot of tweaks. I typically end up with an updateable userstyles and then a separate style for my own tweaks. Its not so bad if you're...

    Stylus is great, but for dark themes, you'll have to make a lot of tweaks. I typically end up with an updateable userstyles and then a separate style for my own tweaks. Its not so bad if you're quick with basic CSS.

    MacOS's darkmode is getting better, but its still not perfect. Your wallpaper and accent color do have an impact, so for the darkest, go with graphite.

    As for Windows, I'm running CakeOS Dark, which requires UltraUXThemePatcher. Its also not perfect, but its a step in the right direction.

    For any app that can take theming, I find that I often need to make a few changes. Dracula has a decent array of themes.

    As for the sudden white flash, it's difficult to work around -- but if you tend to use the same apps and visit most of the same sites, you can nail down stylus themes, userstyles, etc to cover about 90%.

    I think there's a real need and desire for darkmode across the board. I can't seem to find a single community that centralizes this --- it might be something to consider starting.

    9 votes
  3. [3]
    Comment deleted by author
    Link
    1. tomf
      Link Parent
      holy smokes! Dark Reader is pretty good.

      holy smokes! Dark Reader is pretty good.

      3 votes
    2. quan7hum
      Link Parent
      I've used that very same combination for a long time, and It does work pretty well. I usually set up userstyles only for sites I use daily, or almost daily, and let Dark Reader handle the rest....

      I've used that very same combination for a long time, and It does work pretty well. I usually set up userstyles only for sites I use daily, or almost daily, and let Dark Reader handle the rest.
      I've tried every "darkener"-extension over the years, that I could find, and I think Dark Reader is the best one yet.

      2 votes
  4. hotcouch
    Link
    I wish I could make the entire internet solarized like Tildes is. The light mode is really easy on the eyes, especially with flux/nightshift. Dark mode is also a pleasing palette.

    I wish I could make the entire internet solarized like Tildes is. The light mode is really easy on the eyes, especially with flux/nightshift. Dark mode is also a pleasing palette.

    5 votes
  5. Pilgrim
    Link
    I've been using "Dark background and Light Text" in FireFox and "Care your Eyes" for Chrome. Both do the grey background/white font that I like.

    I've been using "Dark background and Light Text" in FireFox and "Care your Eyes" for Chrome. Both do the grey background/white font that I like.

    4 votes
  6. [2]
    nothis
    Link
    Why on earth would it need to be server-side? That smells fishy as hell.

    This plugin looks interesting. From what I can tell, it uses some kind of server-side heuristics to determine the optimal way to darken every page you visit.

    Why on earth would it need to be server-side? That smells fishy as hell.

    4 votes
    1. StellarTabi
      Link Parent
      Probably it's doing something too CPU intensive to run on user's devices like running machine learning on screenshots and selling your browser history.

      Probably it's doing something too CPU intensive to run on user's devices like running machine learning on screenshots and selling your browser history.

      6 votes
  7. balooga
    Link
    Update if anybody's interested! I've been experimenting with your suggestions and here are my findings... @hungariantoast suggested Dark Reader, which I found to be extremely impressive. In my...

    Update if anybody's interested! I've been experimenting with your suggestions and here are my findings...

    @hungariantoast suggested Dark Reader, which I found to be extremely impressive. In my initial tests it's very effective at darkening a range of sites without making them look weird, with few exceptions.

    @Bauke and a few others recommended Stylus and I was pleased to see the spirit of Stylish lives on without the data harvesting! Ultimately I decided not to use it because it's just too fiddly and manual. What I'm looking for is a universal dark mode, not something I have to enable on a site-by-site basis. While its user-created styles are generally better than what Dark Reader comes up with automatically, they're not so much better that it's worth my time to constantly be monitoring them. I'm also aware of the performance impact a plugin like that will have if I start saving custom CSS for every site I visit.

    On my own I discovered ShadowFox, which is like a Firefox theme on steroids. It's beautiful and darkens parts of the browser UI that regular themes can't modify. It also greatly reduces the white flash I've been experiencing when navigating to a new page.

    I'm also still using f.lux because I've found that dark mode alone isn't a perfect substitute for blue light reduction. I think the two complement each other well.

    I'm pretty happy with this combination of tools for now, but I'd love to hear any other recommendations you may have. Thanks everybody!

    4 votes
  8. [3]
    unknown user
    Link
    Kind of off-topic but this inspired me to try to use dark themes for my DE (XFCE) and apps (Emacs, FF, some other stuff). I was thinking that dark modes were actually putting more strain on my...

    Kind of off-topic but this inspired me to try to use dark themes for my DE (XFCE) and apps (Emacs, FF, some other stuff). I was thinking that dark modes were actually putting more strain on my eyes than normal lighter themes, but I'm liking what I have now I think. I already used the lowest brightness setting and redshift (similar to f.lux, but FOSS and thus better). But now I switched to dark and it feels better!

    For Firefox I'll try Stylus mentioned elsewhere in this thread, but I wonder if anybody had any success with the browser.display.* parameters of Firefox.

    3 votes
    1. [2]
      Exalt
      Link Parent
      Light themes are easier to read -- for a couple hours. If you're using your computer for a long period of time, dark themes are better.

      Light themes are easier to read -- for a couple hours. If you're using your computer for a long period of time, dark themes are better.

      2 votes
      1. cfabbro
        Link Parent
        I also find ambient light levels make a huge difference on eye-strain levels of the themes as well. If I am in a well-lit room then light themes are less strenuous to read, but at night when I...

        I also find ambient light levels make a huge difference on eye-strain levels of the themes as well. If I am in a well-lit room then light themes are less strenuous to read, but at night when I have the lights off then dark themes are less strenuous... which is why I tend to switch back and forth.

        I absolutely cannot stand redshift and flux type solutions though, especially since I spend a great deal of time and effort ensuring my monitors are as close to colour accurate as they can be for when I am doing design work and those apps completely screw that up.

        3 votes
  9. [3]
    tildez
    Link
    Why struggle in an unwinnable war when dark text on light background is objectively better? https://ux.stackexchange.com/a/53268

    Why struggle in an unwinnable war when dark text on light background is objectively better?

    https://ux.stackexchange.com/a/53268

    3 votes
    1. SleepyGary
      Link Parent
      Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia That explains why I could never figure out why people...

      People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.

      • Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia

      That explains why I could never figure out why people would prefer light on dark.

      2 votes
    2. balooga
      Link Parent
      Hmmmm, that's some good food for thought. Thanks for the link! I should look more into the evidence before diving into this.

      Hmmmm, that's some good food for thought. Thanks for the link! I should look more into the evidence before diving into this.

      2 votes