// 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 can be manipulated in real-time using JavaScript, which opens up possibilities for dynamic UI elements.
You can update CSS variables using JavaScript to create interactive experiences, such as allowing users to customize colors or layouts.
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
// Check if the user prefers dark mode using window.matchMedia
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Log whether dark mode is preferred by the user
console.log('Dark Mode:', isDarkMode);Jan 26, 2024
Read MoreDiscussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!