OK, but from a designer's perspective, you want to be careful with just inverting colours. The contrast is way too strong here from the demo you offered and the visited link 'purple' is already bleeding on black.
Have a read of an article such as this one, and be smart about colour translation. You might need to calculate contrast or offer a contrast setting as a minimum, and watch for shadows.
Side note: I've been really happy with the "Dark Reader" plugin on various browsers. Have a look at it and see how it handles brightness (+/-) and contrast (+/-).
This API do not invert colors, it uses CSS variables and classes for more customization. No mix-blend-mode or anything. The demo has been done quickly this afternoon, I'll probably change it for the next version.
Why would you prefer this over, as another commenter already pointed out, a web standard like the CSS `prefers-color-scheme` media feature? A web feature like that works across websites, is better equipped to deal with user accessibility issues, and doesn't require Javascript.
The use case is different, the standard CSS `prefers-color-scheme` media feature changes the styles according to your system preferences. Here, the goal is to offer to the developer a simple API to create a customizable darkmode feature. I've just started writing this API but I intend to make it more customizable by including `prefers-color-scheme` option and timestamps based darkmode.
Sometimes sites using the dark mode preference are annoying. Usually they just slap white text on dark background which is utterly unreadable for me for blocks of text.
I like to use dark schemes for coding because I get access to more colors and the lines are short and spaced. But for reading a paragraph more than just changing the text color is needed, and none of the sites does that.
So the sites having it toggleable would actually be quite cool. I hope browsers will get a possibility to check/uncheck this per-site.
Just a random note, I recently switched VSCode to a white background and loving it! I guess, I'm over dark mode everything. For me it seems to help focus better to code on white background.
It's hard to explain, but the white background feels like, psychologically "freeing" - if that makes any sense. It feels like everything is "open" and "fresh".
We evolved to detect predators in greenery. I use a light green theme.
in Visual Studio Code settings.json edit those line : "workbench.colorTheme": "Default Light+","workbench.colorCustomizations": { "editor.background": "#e0ffec", },
What works for me is Solarized Light (or variants) when in a bright room or using a glossy screen. When in a dark environment or if I have access to a non glossy screen I switch to Solarized Dark. Currently the iPad is set to Grayscale mode with Night Shift On. Over the years I have now accepted that a single setting is not going to work and I need to select a handful of them to switch between.
I sometimes switch to light mode when working in bright sunlight. Otherwise (especially at night) I prefer dark (pitch black with high contrast!) mode.
Having recently worked on adding dark mode to our service [0], we found that the technical implementation was pretty easy (generous use of CSS custom properties and prefers-color-scheme). The design work to make it look good, have proper contrast, etc. is much harder. The article the people at Superhuman wrote [1] is a really good resource for this.
I never change the mode of a website. I have rarely done so and it seems to me an absurd cost for nothing. If the site is well designed in light colors it shouldn't be a problem. If the site is badly designed then it would be normal to offer such a possibility. An operating system is different: you are 24 hours looking at it, it is normal to have display preferences but a website? The average number of visits to sites I have worked on has never exceeded 3 minutes.
Frankly, most of what I see of my OS these days is the status bar and the window decoration, a terminal window and maybe a file manager. Websites is what I stare at most of my day, and most of those are the same websites.
Speaking of dark mode. How bizarre is it that after all this time Apple finally puts something in iOS, and IT JUST MADE THINGS WORSE.
In the beginning there was invert colors. Then came smart invert - it worked with some things, failed with others, but was generally pretty good.
Dark mode (by way of prefers-color-scheme etc) should make things awesome in the long run, but at least for now all that's happened is to keep things dark I have to juggle fucking THREE different switches - and end up having to fall back to classic invert most of the time. Smart invert basically stopped functioning with iOS 13.
Properly implemented they could've had a fallback css override a la DarkReader and just put an extra switch per-website, crowdsourcing the results, as well as keep their own database/system override for lazy developers with already-dark apps who refuse to respect wishes (nudge nudge, Spotify...).
Ok, this is ranty, but this is such a weird regression touted as a "feature". Poor form.
While I agree with you that it's super annoying to be browsing in dark mode, just to open an app or website that hasn't implemented this.
But I disagree that Apple should be doing all the work, I really don't want them pushing their design opinions even further upon us (no matter how great they might be)
Not sure if this exists yet (although I think I've seen it before); a CSS parser that will automatically generate all the correct media queries to have a dark mode. Done by smartly inverting colours, possibly giving the chance to quickly override them yourself.
This is basically what email clients have been settling on doing, recently—though they have the luxury of working with a static resource, and not needing to handle any dynamic stuff.
https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-... is a good article about this. We just released this sort of functionality for Fastmail’s webmail within the last few days, too, matching what Litmus calls a partial colour invert. We find that it doesn’t satisfy quite everyone, but the overall experience is much improved. I myself use light mode for my work email and dark for my personal email (partly to distinguish them, partly so I’m testing it—otherwise I’d prefer light mode), and this general approach has produced very good results in all but one case I’ve experienced so far (and that one was still acceptable).
Chrome on Mac allowed you to choose between four or five different algorithms last I checked. At least this was somewhere in the chrome://flags of canary, about half a year ago?
None of it is perfect. I know programmers believe anything that's not software or brewing a flat white should be automated, but dark designs are inherently difficult because the pleasant ridge is narrow, with contrast always close to being too high or too low. As of yet, it really need a designer's eye.
The only way dark mode can ever be done properly is if every single website and app developer implements it themselves. Every other way of doing it is a hack. Apple did what they could. At least this project makes it somewhat easier for websites to implement. For my purposes, all I need at this point is Quora. Goddamn it Quora, why can’t you see the light?
I think if a website designer does not use CSS then they should not need to implement dark mode either, because if no CSS is specified then the user's settings should be used, so they can have dark if they want it to be. (If a web page has no CSS, then I don't need to put in my own; just since they put in their own CSS rather than using my settings, I have to override them then my own.)
Readit News
Have a read of an article such as this one, and be smart about colour translation. You might need to calculate contrast or offer a contrast setting as a minimum, and watch for shadows.
https://uxdesign.cc/turn-the-lights-off-designing-the-dark-m...
Side note: I've been really happy with the "Dark Reader" plugin on various browsers. Have a look at it and see how it handles brightness (+/-) and contrast (+/-).
he doesn't invert colours.
I hope it make the thing more clear.
I like to use dark schemes for coding because I get access to more colors and the lines are short and spaced. But for reading a paragraph more than just changing the text color is needed, and none of the sites does that.
So the sites having it toggleable would actually be quite cool. I hope browsers will get a possibility to check/uncheck this per-site.
The only big downside I've seen so far is performance, but I haven't quantified it yet.
[0] https://github.com/darkreader/darkreader#using-for-a-website
It's hard to explain, but the white background feels like, psychologically "freeing" - if that makes any sense. It feels like everything is "open" and "fresh".
Dark mode feels like being in a cave.
in Visual Studio Code settings.json edit those line : "workbench.colorTheme": "Default Light+","workbench.colorCustomizations": { "editor.background": "#e0ffec", },
Do you spot bugs more easily in the greenery?
https://colinespinas.github.io/darken/
[0] https://kitemaker.co [1] https://blog.superhuman.com/how-to-design-delightful-dark-th...
In the beginning there was invert colors. Then came smart invert - it worked with some things, failed with others, but was generally pretty good.
Dark mode (by way of prefers-color-scheme etc) should make things awesome in the long run, but at least for now all that's happened is to keep things dark I have to juggle fucking THREE different switches - and end up having to fall back to classic invert most of the time. Smart invert basically stopped functioning with iOS 13.
Properly implemented they could've had a fallback css override a la DarkReader and just put an extra switch per-website, crowdsourcing the results, as well as keep their own database/system override for lazy developers with already-dark apps who refuse to respect wishes (nudge nudge, Spotify...).
Ok, this is ranty, but this is such a weird regression touted as a "feature". Poor form.
But I disagree that Apple should be doing all the work, I really don't want them pushing their design opinions even further upon us (no matter how great they might be)
Not sure if this exists yet (although I think I've seen it before); a CSS parser that will automatically generate all the correct media queries to have a dark mode. Done by smartly inverting colours, possibly giving the chance to quickly override them yourself.
https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-... is a good article about this. We just released this sort of functionality for Fastmail’s webmail within the last few days, too, matching what Litmus calls a partial colour invert. We find that it doesn’t satisfy quite everyone, but the overall experience is much improved. I myself use light mode for my work email and dark for my personal email (partly to distinguish them, partly so I’m testing it—otherwise I’d prefer light mode), and this general approach has produced very good results in all but one case I’ve experienced so far (and that one was still acceptable).
None of it is perfect. I know programmers believe anything that's not software or brewing a flat white should be automated, but dark designs are inherently difficult because the pleasant ridge is narrow, with contrast always close to being too high or too low. As of yet, it really need a designer's eye.
FTFY