// 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 define component-specific variables that can be easily overridden for different contexts.
.card {
--card-bg: #fff;
background-color: var(--card-bg);
}
.dark-theme .card {
--card-bg: #2c3e50;
}Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
Create a Livewire component, or use an existing one where you want to manage modals.
Add methods to dispatch custom browser events when buttons are clicked:
Aug 14, 2024
Read More Code
javascript
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';
});Jan 26, 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!