Add Dark mode to websites

3 min readFeb 13, 2021

Add Dark mode to websites — mohitkhare.com

I am a huge fan of dark mode — from editors, terminals to websites, I have most of stuff customized for dark mode. Now most of the website and apps support a dark mode.

Dark Mode is ❤️️

One of the typical case is using your mobile and laptops at night and you don’t want lights on — relatable? Yeah, It is such a pain to use light mode in low light scenarios. Now you want to add it to your personal website and side projects too right? Let’s learn how to do that!

Using Media Queries

A new media query prefers-color-scheme is added in Media Queries 5 specifications. You can simply set your css based on whether the user's preferred light/dark mode.

Here, I just show a simple example, where I am setting background-color and color property for both the modes.

Drawback

Although this works for most of the browsers like Chrome( ≥76), Safari( ≥12.1) and Firefox(≥67). Just in case you are worried about people still using older versions then you might want to implement some custom CSS and JS way described below.

Also, if you are still using IE, then only God can help you 😛

Using Custom CSS and JS

You probably have seen sites with those toggle button to switch between light and dark modes. That looks cool! Well, we are going to implement the same cool thing 😎

Let’s add a simple div with this toggle. You can use a button or any other element.

The code above is only for the toggle. Now, let’s add some css for the light theme.

Similarly, let’s add css for the dark theme -

Once, we have this css added. Don’t forget to include them in your html.

<link id="theme" rel="stylesheet" type="text/css" href="css/light_theme.css" />

We don’t need to add dark_theme.css since we will add it via custom JS.

You should be able to see a working light theme and a toggle. But, the theme doesn’t change!!

Let’s make that toggle work now! Add javascript to load custom css file based on the theme mode selected. We use localstorage to save user preferences for the theme. We don't want him to click toggle again and again.

I use a reloadCss() to refresh css files without actual page reload. You can also refresh the page with window.location.reload()

Drawback — This method basically iterates over all CSS links.