// 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
@media (max-width: 600px) {
:root {
--font-size-base: 14px;
}
}This approach adjusts the font size based on screen size, allowing for a more responsive experience.
Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
Add methods to dispatch custom browser events when buttons are clicked:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ModalManager extends Component
{
public function openUserProfileModal()
{
$this->dispatchBrowserEvent('open-modal', ['modalId' => 'user-profile-modal']);
}
public function openSettingsModal()
{
$this->dispatchBrowserEvent('open-modal', ['modalId' => 'settings-modal']);
}
public function openNotificationsModal()
{
$this->dispatchBrowserEvent('open-modal', ['modalId' => 'notifications-modal']);
}
public function render()
{
return view('livewire.modal-manager');
}
}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!