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');
});

Continue Reading

Handpicked posts just for you — based on your current read.

CSS Variables and Custom Properties: Dynamic Theming and Beyond 

const toggleThemeBtn = document.getElementById('theme-toggle');

toggleThemeBtn.addEventListener('click', () => {
    document.body.classList.toggle('dark-theme');
});

This simple JavaScript snippet switches between light and dark themes when the button is clicked.

Sep 05, 2024 Tutorial

Managing Modals with Livewire and JavaScript

Add methods to dispatch custom browser events when buttons are clicked:

<?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');
    }
}

Aug 14, 2024 Tutorial

Password Toggle

No preview available for this content.

Jan 26, 2024 Code

Detect Dark Mode Preference

No preview available for this content.

Jan 26, 2024 Code

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!