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

While CSS variables can’t be used directly within media query expressions, you can use variables to change the style properties that are affected by media queries.

@media (max-width: 600px) {
    :root {
        --font-size-base: 14px;
    }
}

Sep 05, 2024
Read More
Tutorial
javascript php

Managing Modals with Livewire and JavaScript 

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ModalManager extends Component
{
    public function openUserProfileModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'user-profile-modal']);
    }

    public function openSettingsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'settings-modal']);
    }

    public function openNotificationsModal()
    {
        $this->dispatchBrowserEvent('open-modal', ['modalId' => 'notifications-modal']);
    }

    public function render()
    {
        return view('livewire.modal-manager');
    }
}

Modify your Livewire component's Blade view to call the methods defined in the component class.

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!