// 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
Continue Reading
Discover more amazing content handpicked just for you
Tutorial
css
CSS Variables and Custom Properties: Dynamic Theming and Beyond
When the .dark-theme class is added to the body, it overrides the variables, and the entire theme changes dynamically.
You can toggle between themes dynamically using JavaScript to update the class on the body element.
Sep 05, 2024
Tutorial
javascript php
Managing Modals with Livewire and JavaScript
We'll create a system to open and close modals using Livewire and JavaScript by dispatching custom events.
Create a Livewire component, or use an existing one where you want to manage modals.
Aug 14, 2024
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
Code
javascript
Detect Dark Mode Preference
No preview available for this content.
Jan 26, 2024
Discussion 0
Please sign in to join the discussion.
No comments yet. Start the discussion!