// 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
While CSS variables are powerful, overusing them or nesting too many overrides can complicate debugging. It’s important to use them judiciously and keep them organized.
CSS variables are highly effective when building component-based designs, as they allow for flexibility and reusability.
Managing Modals with Livewire and JavaScript
When using Livewire, it's common to encounter issues with JavaScript-based interactions, such as modals, due to Livewire's re-rendering of the DOM. This tutorial will guide you through using Livewire's event system to handle modals more effectively.
- Basic understanding of Livewire and JavaScript
- A Laravel project with Livewire installed
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!