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

Discover more amazing content handpicked just for you

Tutorial
css

CSS Variables and Custom Properties: Dynamic Theming and Beyond

CSS Variables, also referred to as Custom Properties, allow you to store and reuse values in your CSS. Unlike preprocessor variables (like Sass or Less), CSS Variables are natively supported in the browser and work dynamically in the cascade, meaning they can be scoped to specific elements and change based on media queries or JavaScript interactions.

CSS variables are defined using the -- syntax and are typically placed in the :root selector to apply globally.

Sep 05, 2024
Read More
Tutorial
javascript php

Managing Modals with Livewire and JavaScript

Add a script to listen for the custom events emitted by Livewire and open the modals accordingly.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Listen for the custom 'open-modal' event
        window.addEventListener('open-modal', event => {
            const modalId = event.detail.modalId;
            const modalElement = document.getElementById(modalId);
            if (modalElement) {
                modalElement.classList.remove('hidden');
            }
        });

        // Close modal logic
        document.querySelectorAll('[data-modal-hide]').forEach(button => {
            button.addEventListener('click', function () {
                const modalId = this.getAttribute('data-modal-hide');
                const modalElement = document.getElementById(modalId);
                if (modalElement) {
                    modalElement.classList.add('hidden');
                }
            });
        });
    });
</script>

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

No preview available for this content.

Jan 26, 2024
Read More

Discussion 0

Please sign in to join the discussion.

No comments yet. Start the discussion!