// 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
CSS Variables provide an elegant solution for creating flexible, reusable, and dynamic styles. They enable you to build adaptable designs, such as dynamic themes, responsive layouts, and interactive UI components. By incorporating CSS Variables into your workflow, you can create maintainable, scalable styles
heets that are easy to adapt and manage. Keep your variables organized, avoid over-complicating overrides, and leverage the full power of JavaScript to unlock new design possibilities.
Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
<script>
document.addEventListener('DOMContentLoaded', function () {
// Listen for the custom 'open-modal' event
window.addEventListener('open-modal', event => {
const modalId = event.detail.modalId;
const modalElement = document.getElementById(modalId);
if (modalElement) {
modalElement.classList.remove('hidden');
}
});
// Close modal logic
document.querySelectorAll('[data-modal-hide]').forEach(button => {
button.addEventListener('click', function () {
const modalId = this.getAttribute('data-modal-hide');
const modalElement = document.getElementById(modalId);
if (modalElement) {
modalElement.classList.add('hidden');
}
});
});
});
</script>- 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.
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!