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.)
It allows you to build dark mode optimized email, and when you preview the email in dark mode, the whole app changes to dark mode.
Because of this we use a manual toggle instead of prefers-color-scheme.
We picked the colors carefully and changed things like shadows borders etc to make the interface look great in dark mode. Although a solution like OPs could be a quick and dirty way to get a basic dark mode implemented, you'll never get your site or app looking quite as good as getting a designer to look at it.
I think OP was referring to the sudden obsession with dark mode (in the past year or so). It's not like screens and night time are new things, so what changed in the past while to induce this dark mode craze?
I think it correlates with the "blue light" studies that were released lately. As far as I know they weren't conclusive, but both Microsoft and Apple implemented Flux-like screen dimming, dark mode seems like a logical step.
Personally I prefer light themes, I just turn the lights on so that I don't sit in the dark.
Darkmode.js uses `mix-blend-mode` to invert the colors on the pages and offer a class based custom style system.
Here you also have the class based custom styles but also have a CSS variables based styling system.
You can chose what value will take a variable depending on the current state of the darkmode.
See the readme of the github page for more informations, ask again if you need additional informations.
There already is a github page demo, look at the description of the github project or at the "Demo available" badge. I'll probably change the demo in the next update, it is too simple and ugly. Thanks for the feedback.
This is awesome. Always wanted something like this, but never got around to being comfortable enough with CSS to try. Def will try it out on the next front end I throw together!
So, what's the easiest way for me to make HN dark? I have enough karma to change the color of the bar btw, I set it to C0C0C0 to make it stick out less.
The actual code behind this is short and straightforward: https://github.com/ColinEspinas/darken/blob/master/src/index.... For myself, I think it gets the balance of complexity wrong: it focuses on shifting various things into JavaScript, rather than doing it all in CSS using the (prefers-color-scheme) media query, and rewriting media queries to achieve manual switching.
As a demonstration of the alternative approach I advocate, see what I came up with for my own website: https://chrismorgan.info/blog/dark-theme-implementation/. This uses native CSS techniques, working completely without JavaScript, merely using JavaScript to allow the user to manually switch, retaining that preference for future page loads and optimising page loading just about as far as is possible when doing it client-side to minimise the probability of a flash of inverted content if you manually switched to the opposite of what (prefers-color-scheme) would have chosen.
The main thing that my approach doesn’t do that this thing does is dispatching an event, so that other JavaScript could conveniently be notified of a theme change. This is fairly deliberate on my part (I deliberately do all theme switching with CSS, and have no JavaScript that needs to change anything for dark mode), but could readily be added to what I wrote if desired.
With my approach (for which I will also clarify that the JavaScript is deliberately written for compactness, not some theoretical notion of maintainability or extensibility), the example:
<script>
// (Add the button to the document in JS,
// since it’ll only work if this JS runs anyway.)
</script>
<style>
body {
--primary-color: #ffffff;
--secondary-color: #000000;
}
</style>
<style media="screen and (prefers-color-scheme: dark)">
body {
--primary-color: #000000;
--secondary-color: #ffffff;
}
</style>
(Two style blocks because my thing doesn’t deal with `@media … { … }` inline in CSS, because I don’t need it. You could make it do it if you really wanted to.)
I find this approach much more manageable, and it allows adding custom CSS rules for dark mode (which I definitely use), rather than just setting CSS custom properties.
Very interesting thanks. I'm looking for a balance in great UX and features with a minimalist approach to the code needed in the client. Trying to stay with vanilla javascript with little dependencies might be hard thougg. So many frameworks and old habits. Maybe wasm will change that.
I understand the concept of what you are doing, but I think those two methods have different use cases, yours may be more performant but mine, I feel, is more simple for everyday usage. I'll definitly look your work more in depth. Thanks for the feedback!
I was also a bit confused as to why the title was "DarkMode Made Easy", especially since your example just showed adjusting CSS variables. I would assume anyone who's working with CSS variables, also knows about media queries, so it's far easier to just do it all in CSS.
Where I could see this being useful is that you have a callback that you can use, so when dark mode is enabled, you can make some other adjustments when needed.
You'll have a callback on the next version. I plan a lot of tweaks and features that can hardly be done only in CSS, moreover the plan is to give devs an easy way to do dark-modes. I understand the divergences and critics but want to try things as a student. I thanks you a lot for your review.
I honestly recommend writing your own. The code is presently close to trivial, and if you write such a thing yourself you can take it in the direction that suits your requirements.
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 (+/-).