// 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
<!-- 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>Add a script to listen for the custom events emitted by Livewire and open the modals accordingly.
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!