// 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
Related Posts
More content you might like
CSS Variables and Custom Properties: Dynamic Theming and Beyond
CSS Variables, also referred to as Custom Properties, allow you to store and reuse values in your CSS. Unlike preprocessor variables (like Sass or Less), CSS Variables are natively supported in the browser and work dynamically in the cascade, meaning they can be scoped to specific elements and change based on media queries or JavaScript interactions.
CSS variables are defined using the -- syntax and are typically placed in the :root selector to apply globally.
Managing Modals with Livewire and JavaScript
<?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');
}
}Modify your Livewire component's Blade view to call the methods defined in the component class.
Password Toggle
// Get references to the password input and toggle button
const passwordInput = document.getElementById('passwordInput');
const toggleButton = document.getElementById('toggleButton');
// Add event listener to the toggle button
toggleButton.addEventListener('click', () => {
// Toggle the password input type between 'password' and 'text'
passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
});Detect Dark Mode Preference
No preview available for this content.
Discussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!