
Show HN: Darken – Darkmode Made Easy - Call_in
https://github.com/ColinEspinas/darken
======
keyle
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.

[https://uxdesign.cc/turn-the-lights-off-designing-the-
dark-m...](https://uxdesign.cc/turn-the-lights-off-designing-the-dark-mode-of-
wego-ios-app-6c4967e59dd6)

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 (+/-).

~~~
Call_in
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.

------
doomrobo
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.

~~~
Call_in
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.

I hope it make the thing more clear.

------
tyscorp
If you need an extremely quick way to implement dark mode, you can use the
darkreader[0] npm package. I set it up for our app in ~30 mins.

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](https://github.com/darkreader/darkreader#using-for-a-website)

~~~
williamstein
I just tested this out on a complicated site and it is amazing! Thanks.

------
kerng
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.

~~~
julienreszka
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", },

~~~
0-_-0
> We evolved to detect predators in greenery. I use a light green theme.

Do you spot bugs more easily in the greenery?

~~~
julienreszka
Here some reading for you :
[https://www.ncbi.nlm.nih.gov/pubmed/24535839](https://www.ncbi.nlm.nih.gov/pubmed/24535839)

------
NilsIRL
I think a before and after screenshot, with minimal configuration, would help
to understand what it does, and see the "quality" of the results.

~~~
iCarrot
It has a demo page, "hidden" in the repo's description but not in README.md:

[https://colinespinas.github.io/darken/](https://colinespinas.github.io/darken/)

~~~
Call_in
You have a badge "Demo Available" too, I'll maybe do a more clear link.

------
kevsim
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.

[0] [https://kitemaker.co](https://kitemaker.co) [1]
[https://blog.superhuman.com/how-to-design-delightful-dark-
th...](https://blog.superhuman.com/how-to-design-delightful-dark-
themes-7b3da644ff1f)

------
meerita
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.

~~~
danielbln
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.

------
htfu
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.

~~~
woutr_be
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.

~~~
chrismorgan
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-...](https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-
marketers) 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).

------
paulodeon
We recently launched dark mode for our email building app Milliner
[https://www.milliner.app/](https://www.milliner.app/).

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.

------
mochialex
why are people so obsessed with dark mode?

~~~
Tepix
They don't like to be blinded by their white-background screens while using
them in the dark.

~~~
invalidusernam3
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?

~~~
skocznymroczny
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.

------
beanpup_py
Do you do anything different to other libraries like dark mode.js?

[https://github.com/sandoche/Darkmode.js](https://github.com/sandoche/Darkmode.js)

~~~
Call_in
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.

------
brachi
Neat! Using a browser add-on and brightness control of my displays improved my
sleep.

A simple github page showing a demo with the code next to it might be cool,
and the README size can be cut in half.

~~~
Call_in
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.

------
ZeroCool2u
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!

~~~
Call_in
Thanks, feel free to give feedback, submit issues and contribute if you want!

------
teekert
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.

------
chrismorgan
The actual code behind this is short and straightforward:
[https://github.com/ColinEspinas/darken/blob/master/src/index...](https://github.com/ColinEspinas/darken/blob/master/src/index.js).
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/](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:

    
    
      <button id="dm-toggle">Toggle darkmode</button>
      <script>
        const darkmode = new darken({
          toggle: "#dm-toggle",
          variables: {
            "--primary-color": ["#ffffff", "#000000"],
            "--secondary-color": ["#000000", "#ffffff"],
          }
        });
      </script>
    

… would be written more like this:

    
    
      <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.

~~~
Call_in
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!

~~~
woutr_be
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.

~~~
Call_in
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.

~~~
woutr_be
Don’t get me wrong, it’s great. Just that with the current examples it’s not
that useful to me. Callbacks would be cool!

~~~
chrismorgan
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.

------
colonwqbang
I feel you should be aware that "web developer" is misspelled on your website.

~~~
Call_in
Oh! Thanks for that, I'll fix the typo when I've got time

------
rileytg
what’s the intended use case?

~~~
guessmyname
It turns light colored websites into dark websites [1][2][3].

Here is an example:
[https://colinespinas.github.io/darken/](https://colinespinas.github.io/darken/)

[1] [https://support.apple.com/en-ca/HT208976](https://support.apple.com/en-
ca/HT208976)

[2] [https://css-tricks.com/dark-modes-with-css/](https://css-tricks.com/dark-
modes-with-css/)

[3] [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

