Creating a light and dark mode toggle for your website is a great way to improve user experience and accessibility. Users can switch between light and dark themes based on their preferences or the time of day. Below is a step-by-step guide on how to implement this using HTML, CSS, and JavaScript.
INTRODUCTION
Light and dark modes provide flexibility for users by allowing them to choose a theme that suits their environment or personal preference. Implementing this functionality involves creating two sets of styles (one for each theme) and using JavaScript to toggle between them. This tutorial will walk you through creating a simple light and dark mode switcher.
WATCH TUTORIAL:
HTML Structure
First, we’ll create the HTML structure for our page, including a button to toggle between light and dark modes.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding for the HTML document -->
<meta charset="UTF-8">
<!-- Responsive design viewport settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title of the HTML document -->
<title>Light/Dark Theme Toggle</title>
<!-- Linking external CSS file for styling -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Container for the theme toggle switch -->
<div class="toggle">
<!-- Checkbox input for toggling themes -->
<input type="checkbox" id="toggle" class="checkbox">
<!-- Label associated with the checkbox, acts as the slider for the toggle switch -->
<label for="toggle" class="label"></label>
<!-- Circle that moves with the toggle switch -->
<div class="circle"></div>
</div>
<!-- Linking external JavaScript file for functionality -->
<script src="script.js"></script>
</body>
</html>
CSS Styling
Next, we’ll define the styles for both light and dark modes in our CSS file.
/* Apply to the body element: Remove default margin and padding, set height to 100%, use flexbox for layout, center align items horizontally and vertically, set background color */
body {
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
height: 100%; /* Ensure the body takes up the full height of the viewport */
display: flex; /* Use flexbox layout */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
background-color: #f0f0f0; /* Light grey background color */
}
/* Apply to the toggle container: Set relative positioning, define size, and margin from the top */
.toggle {
position: relative; /* Position relative to contain the absolutely positioned elements */
width: 60px; /* Set width of the toggle switch */
height: 30px; /* Set height of the toggle switch */
margin-top: 200px; /* Add space from the top */
}
/* Hide the checkbox input from view */
.checkbox {
display: none; /* Hide the checkbox input */
}
/* Apply to the label element: Absolute positioning, define size, set background color, rounded corners, pointer cursor, and transition effect */
.label {
position: absolute; /* Position absolutely within the .toggle container */
top: 0; /* Align to the top of the container */
left: 0; /* Align to the left of the container */
width: 60px; /* Set width to match the toggle container */
height: 30px; /* Set height to match the toggle container */
background-color: #5f5f5f; /* Default grey background color */
border-radius: 15px; /* Round the corners to make it a pill shape */
cursor: pointer; /* Change cursor to pointer on hover */
transition: background-color 0.3s; /* Smooth background color transition */
}
/* Apply to the circle element: Absolute positioning, define size, white background, rounded shape, and transition effect */
.circle {
position: absolute; /* Position absolutely within the .toggle container */
top: 2px; /* Align with a 2px offset from the top */
left: 2px; /* Align with a 2px offset from the left */
width: 26px; /* Set width for the circle */
height: 26px; /* Set height for the circle */
background-color: white; /* White background color for the circle */
border-radius: 50%; /* Make it a perfect circle */
transition: transform 0.3s; /* Smooth transition for the transform property */
}
/* Apply styles when the checkbox is checked: Change label background color */
input[type="checkbox"]:checked + .label {
background-color: #8f8f8f; /* Darker grey background color when checked */
}
/* Apply styles to the circle when the checkbox is checked: Move the circle to the right */
input[type="checkbox"]:checked + .label + .circle {
transform: translateX(30px); /* Move the circle 30px to the right */
}
/* Apply to body when dark mode is active: Change background and text color */
body.dark {
background-color: #101010; /* Dark background color for dark mode */
color: white; /* White text color for dark mode */
}
JavaScript Functionality
JavaScript Functionality
We’ll use JavaScript to handle the toggle switch functionality and save the user’s preference using localStorage.
// Select the checkbox element with class 'checkbox' and store it in a variable
const toggleSwitch = document.querySelector('.checkbox');
// Add an event listener to the checkbox for the 'change' event
toggleSwitch.addEventListener('change', function() {
// Check if the checkbox is checked
if(this.checked) {
// If checked, add the 'dark' class to the body element
document.body.classList.add('dark');
} else {
// If not checked, remove the 'dark' class from the body element
document.body.classList.remove('dark');
}
});
Conclusion
Adding a light and dark mode toggle is an essential feature for enhancing user experience on your website. This tutorial has guided you through creating a basic toggle switch using HTML, CSS, and JavaScript. You’ve also learned how to use localStorage to save user preferences, ensuring the theme choice remains consistent even after page reloads. Feel free to explore various styles and functionalities to offer a more personalized experience for your users.