Create your own Dark Mode using JS, CSS Variables, and localStorage

Get yours up and running in just minutes!

Dark Mode

Either you use it when and wherever you can, or you don’t use it at all.

Giving your users a way to customise their experience on your website is a huge win for user experience.

In this article, I’ll guide you through how to create your very own using CSS Variables, some basic JavaScript, and the use of localStorage!

Follow along

So to follow along with this article you can open up your own text editor, but I also created a couple of Sandboxes for you to follow along without having to touch any code yourself.

These are the steps we will be following:

• Creating our CSS Variables
• Adding the Theme Toggle Switch
• Writing the JS logic

That’s all you’ll need 😄

If you don’t have a website of your own to which you wish to add this functionality, use this demo website to follow along.

Creating our CSS Variables

We will be using CSS Custom Properties, better known as CSS Variables, which we can reference and modify in our CSS file.

I recently wrote an article that goes in-depth on what they exactly are and what some do’s and don’t are. If you want to read more about CSS Variables, you can check it out over here.

CSS Variables (or CSS Custom Properties) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., — main-color: black;) and are accessed using the var() function (e.g., color: var( — main-color);)

Starting, we’ll add the CSS Variables for our default/light mode. We can add these to the :root pseudo class.