// Get the dark mode toggle button by its ID
const darkModeToggle = document.getElementById('darkModeToggle');
// Add a click event listener to toggle dark mode on the body
darkModeToggle.addEventListener('click', () => {
// Toggle the 'dark-mode' class on the body
document.body.classList.toggle('dark-mode');
});Dark Mode Toggle
Related Posts
More content you might like
CSS Variables and Custom Properties: Dynamic Theming and Beyond
CSS Variables (also known as Custom Properties) offer a powerful way to make your styles more maintainable and flexible. With CSS variables, you can define reusable values and adapt your design easily for different themes, screen sizes, or contexts. This tutorial will explore how to use CSS Variables for dynamic theming, managing responsive designs, and optimizing your CSS for modern web development.
- Defining and Using CSS Variables
- The Cascade and Inheritance of CSS Variables
Managing Modals with Livewire and JavaScript
- Basic understanding of Livewire and JavaScript
- A Laravel project with Livewire installed
We'll create a system to open and close modals using Livewire and JavaScript by dispatching custom events.
Detect Dark Mode Preference
No preview available for this content.
Discussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!