// 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
You can update CSS variables using JavaScript to create interactive experiences, such as allowing users to customize colors or layouts.
document.documentElement.style.setProperty('--primary-color', '#e74c3c');Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
Modify your Livewire component's Blade view to call the methods defined in the component class.
<!-- Button for User Profile Modal -->
<div class="mt-7">
<a href="javascript:;" wire:click.prevent="openUserProfileModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open User Profile</a>
</div>
<!-- Button for Settings Modal -->
<div class="mt-7">
<a href="javascript:;" wire:click.prevent="openSettingsModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open Settings</a>
</div>
<!-- Button for Notifications Modal -->
<div class="mt-7">
<a href="javascript:;" wire:click.prevent="openNotificationsModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open Notifications</a>
</div>
<!-- Modals -->
<div id="user-profile-modal" class="modal hidden"> <!-- User Profile Modal content here --> </div>
<div id="settings-modal" class="modal hidden"> <!-- Settings Modal content here --> </div>
<div id="notifications-modal" class="modal hidden"> <!-- Notifications Modal content here --> </div>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!