// 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
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}In the example above, we define --primary-color, --secondary-color, and --font-size as custom properties. These variables are then used within the body element by calling var(--variable-name).
Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
When using Livewire, it's common to encounter issues with JavaScript-based interactions, such as modals, due to Livewire's re-rendering of the DOM. This tutorial will guide you through using Livewire's event system to handle modals more effectively.
- Basic understanding of Livewire and JavaScript
- A Laravel project with Livewire installed
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!