Dark mode on your site with 1 line of code

If you want to add a good looking dark mode for your site, you probably know that it takes a lot of work to do. You would have to update your CSS, paying attention on a new color scheme, probably considering SASS. You would have to add JavaScript code to handle all the stuff in your current environment.

But what if I say that you don’t have to do all of this?

If you will be satisfied with just a good looking black theme, there is a solution. I wasn’t able to find it immediately, and I want to mention it here so everyone interested will have their time saved.

You add a library called darkreader:

npm install darkreader

And you enable dark mode with one line of code:

DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 });

To disable it just invoke:

DarkReader.disable();

Here is an example of how my site was changed, and it was so pretty that I decided to make dark mode enabled as my default setting. You can test it live.

Of course you would have to handle basic stuff like adding a switch button and saving user choice, which is pretty easy.

These are the commit-changes I made to integrate darkreader. But be precocious — I use ClojureScript.

Hope that was helpful.