// 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
With CSS variables, you can dynamically adjust font sizes and easily apply these changes across various elements.
:root {
--font-size-base: 16px;
--font-size-large: calc(var(--font-size-base) * 1.5);
}
h1 {
font-size: var(--font-size-large);
}Sep 05, 2024
Read More Tutorial
javascript php
Managing Modals with Livewire and JavaScript
- Basic understanding of Livewire and JavaScript
- A Laravel project with Livewire installed
We'll create a system to open and close modals using Livewire and JavaScript by dispatching custom events.
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!