Creating Theme Toggling Functionality in astro.js using plain CSS with (source code)
In modern web development, providing users with the option to switch between different themes has become a popular feature. Whether it's a light mode for better readability during the day or a dark mode for reduced eye strain at night, offering theme toggling functionality can greatly enhance the user experience. In this article, we'll explore how to implement a simple theme toggling functionality using HTML, CSS, and JavaScript.
Prerequisites
Before we dive into the implementation, make sure you have a basic understanding of HTML, CSS, and JavaScript. Familiarity with concepts like event handling and DOM manipulation will be helpful.
Implementation
1. ASTRO
We start by creating the ASTRO structure for our theme toggling feature. We'll have a checkbox input wrapped inside a label to serve as our toggle button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Toggling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Theme Toggling Example</h1>
<label class="switch">
<input type="checkbox" id="themeToggle">
<span class="slider round"></span>
</label>
</div>
<script src="script.js"></script>
</body>
</html>2. CSS Styling
Next, we'll style the toggle button and define the appearance for both light and dark themes using CSS. We'll use CSS transitions to animate the theme change smoothly.
body {
font-family: Arial, sans-serif;
transition: background-color 0.3s ease;
}
.container {
text-align: center;
margin-top: 100px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
3. JavaScript Functionality
Finally, we'll add JavaScript to handle the toggle functionality. When the checkbox state changes, we'll update the body class to switch between light and dark themes dynamically.
<!-- ... Rest of astro code -->
<script is:inline>
const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('change', function() {
if (this.checked) {
document.body.classList.add('dark-theme');
} else {
document.body.classList.remove('dark-theme');
}
});
</script>Conclusion
In this tutorial, we've learned how to implement a theme toggling functionality in astro.js project using CSS, and JavaScript. By allowing users to switch between different themes, we can enhance accessibility and user experience on our websites. You can further extend this functionality by adding more themes, customizing styles, or integrating with user preferences. Experiment with different designs and features to create a seamless and enjoyable browsing experience for your users.
Final Thoughts
Theme toggling is just one example of how you can leverage CSS, and JavaScript in astro project to enhance your web projects. As you continue to explore web development, consider incorporating other interactive features and design patterns to create engaging and user-friendly experiences. Keep experimenting, learning, and pushing the boundaries of what's possible on the web.
