DeveloperBreeze

Dark Mode Toggle

javascript
// 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

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 More

Discussion 0

Please sign in to join the discussion.

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