// 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
javascript
Related Posts
More content you might like
Tutorial
css
CSS Variables and Custom Properties: Dynamic Theming and Beyond
While CSS variables can’t be used directly within media query expressions, you can use variables to change the style properties that are affected by media queries.
@media (max-width: 600px) {
:root {
--font-size-base: 14px;
}
}Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
- Custom Events: We use Livewire's
dispatchBrowserEventto emit a custom eventopen-modalwith themodalIdas a parameter. - JavaScript Listener: A listener is set up for the
open-modalevent to open the specified modal by removing thehiddenclass. This ensures that JavaScript functions properly even after Livewire re-renders parts of the page. - Close Logic: We add listeners for buttons that hide the modals, ensuring a full modal lifecycle.
By using Livewire's event dispatching capabilities in combination with JavaScript, you can manage modals effectively even when Livewire re-renders the DOM. This approach provides a seamless user experience for modal interactions.
Aug 14, 2024
Read More Code
javascript
Detect Dark Mode Preference
No preview available for this content.
Jan 26, 2024
Read MoreDiscussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!