How to Create Dark Mode Toggle with HTML, CSS, and JavaScript
This tutorial guides you through creating a dark mode toggle for websites using HTML, CSS, and JavaScript. The guide covers essential concepts like CSS variables, DOM manipulation, and local storage usage.
1
Let's create a dark mode toggle for your website!
2
Create an index.html file with the basic HTML structure and import the style.css and script.js files.
3
Inside the body tag, add necessary elements and a div with the .toggle-container class. Insert the sun and moon SVG icons within it.
4
This is what our plain index.html file looks like
5
In your style.css file, use the :root selector to define CSS variables for dark and light colors. This allows for easy theme customization.
6
Add CSS styles to your base elements (body, container, and heading).
7
Add the .dark-mode class that swaps the background and text colors when applied to an element.
8
Add CSS styles for the sun and moon SVG icons, controlling their visibility based on the current mode.
9
Here's the styled page with a default light theme!
10
In your script.js file, select the necessary DOM elements: the themeToggle button and the body element.
11
Create an event listener for the toggle button to switch between light and dark modes by adding or removing the .dark-mode class.
12
Inside the event listener, use localStorage.setItem() to save the user's theme preference.
13
On page load, use localStorage.getItem() to check for a saved preference and apply it if it exists.
14
Now we have a dark mode toggle ready!
