How to integrate a dark mode on your website

By

If you have a website and want to give your visitors a “dark” mode to protect their delicate little eyes when the night comes, I’ve got you covered.

This is a JS script coupled with a CSS which is a bit tricky since it allows you to invert the colors of a web page. So white becomes black and black becomes white (roughly).

And it allows, by adding a few lines of code in your pages, to have a nice button allowing to switch between the light side and the dark side of your site.

To do this, add the following code in your <head />:

<script src=“https://binayak.codes/dark-theme-switcher/app.js”></script> <link rel=“stylesheet” href=“https://binayak.codes/dark-theme-switcher/styles/style.css” />

 
Obviously, for those who don’t like to integrate external scripts (and you are right), nothing prevents you from downloading them locally and modifying them a little to make them your own or even fix any bugs 🙂.

Dark Theme Switcher can be found here and the code is on Github.

Related Posts

Leave a Comment