// 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
In the example above, we define --primary-color, --secondary-color, and --font-size as custom properties. These variables are then used within the body element by calling var(--variable-name).
CSS variables follow the standard cascade and inheritance rules, meaning they can be overridden by more specific selectors or modified within a particular scope.
Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
Add a script to listen for the custom events emitted by Livewire and open the modals accordingly.
<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>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!