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 😄

#javascript

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