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

CSS Variables (also known as Custom Properties) offer a powerful way to make your styles more maintainable and flexible. With CSS variables, you can define reusable values and adapt your design easily for different themes, screen sizes, or contexts. This tutorial will explore how to use CSS Variables for dynamic theming, managing responsive designs, and optimizing your CSS for modern web development.

  • Defining and Using CSS Variables
  • The Cascade and Inheritance of CSS Variables

Sep 05, 2024
Read More
Tutorial
javascript php

Managing Modals with Livewire and JavaScript

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

<!-- Button for User Profile Modal -->
<div class="mt-7">
    <a href="javascript:;" wire:click.prevent="openUserProfileModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open User Profile</a>
</div>

<!-- Button for Settings Modal -->
<div class="mt-7">
    <a href="javascript:;" wire:click.prevent="openSettingsModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open Settings</a>
</div>

<!-- Button for Notifications Modal -->
<div class="mt-7">
    <a href="javascript:;" wire:click.prevent="openNotificationsModal" class="font-industry-medium text-[16px] text-[#284E7B] underline decoration-solid decoration-[#284E7B]">+ Open Notifications</a>
</div>

<!-- Modals -->
<div id="user-profile-modal" class="modal hidden"> <!-- User Profile Modal content here --> </div>
<div id="settings-modal" class="modal hidden"> <!-- Settings Modal content here --> </div>
<div id="notifications-modal" class="modal hidden"> <!-- Notifications Modal content here --> </div>

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. Be the first to share your thoughts!