DeveloperBreeze

Dark Mode Toggle

javascript
Dark Mode Toggle Event Listener 
// 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');
});

Related Posts

More content you might like

Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS variables can be manipulated in real-time using JavaScript, which opens up possibilities for dynamic UI elements.

You can update CSS variables using JavaScript to create interactive experiences, such as allowing users to customize colors or layouts.

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

Password Toggle

No preview available for this content.

Jan 26, 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 More

Discussion 0

Please sign in to join the discussion.

No comments yet. Be the first to share your thoughts!