delane-nyaruni / dark-mode-demo

Create a dark mode toggle using CSS Variables and Javascript. An accompaniment to a blog post containing step-by-step directions.

Create a Dark Mode for your website

Live Demo

Codepen Demo

Overview

This project is a demonstration intended to supplement a written walkthrough. The walkthrough details how to build a Dark Mode for a website using CSS Custom Properties and Vanilla Javascript and elaborates on the following steps:

1. Consolidate your pages color scheme into the root class using CSS Variables
2. Create a Dark Mode color scheme and create a class that will modify the root element
3. Create a custom toggle button that will be used to turn Dark Mode on and off
4. Switch the theme when the toggle is checked using Vanilla Javascript
5. Make sure user settings are saved to the localStorage property of the window object

Head here to view the project walkthrough.

Cheers! 🍻