Hey, WebDev Wizards! 🔥 Welcome back to WebDevTales! Today, we are building something SUPER cool—a futuristic toggle button that can switch between light and dark mode with smooth animations, neon effects, and a glowing ripple! 🎉

Light Mode:

Dark Mode:

Let’s Create a Futuristic Light or Dark Mode Toggle! 🚀

Creating a light/dark mode toggle is easier than you think, and it only takes 5 minutes! ⏱️ Let’s break it down into a simple step-by-step process.

1. HTML Structure 🏗️

We’ll start by setting up the basic structure for our futuristic toggle button. This includes the container and the knob where the magic happens.

<div class="toggle-container">
    <div class="toggle">
        <div class="knob">
            <i class="icon fa fa-sun"></i> <!-- Default: Sun icon -->
        </div>
    </div>
</div>

This snippet creates the toggle button, and by default, it shows the sun icon 🌞 for light mode.

2. CSS Styling 🎨

Now for the fun part! We’re adding styles to give our toggle a sleek look with smooth transitions and a glowing knob. 🌟

       body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff; /* Default: Dark mode */
            font-family: 'Arial', sans-serif;
            transition: background 0.5s ease; /* Smooth transition for background */
        }

        /* Toggle Container */
        .toggle-container {
            position: relative;
        }

        /* Toggle Base */
        .toggle {
            width: 7.5rem;
            height: 3.75rem;
            background: linear-gradient(145deg, #28293e, #3a3b5e);
            border-radius: 3.125rem;
            display: flex;
            align-items: center;
            padding: 0.3rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        /* Knob */
        .knob {
            width: 3.125rem;
            height: 3.125rem;
            background: linear-gradient(145deg, #86A8E7, #91EAE4); /* Gradient effect */
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(134, 168, 231, 0.8);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        }

After this, we will do some styling for the icon.

/* Icon */
        .icon {
            font-size: 1.5rem;
            color: #fff;
        }

And the best part—when you click the toggle, we’ll make the knob slide to the other side using the transform property. Boom, it’s like flipping a switch from light to dark mode! Oh, and of course, we’re adding some transitions, so everything moves smoothly.

/* Toggle On State */
        .toggle.active {
            background: linear-gradient(145deg, #11172B, #1A1F40);
            box-shadow: 0 15px 35px rgba(0, 255, 233, 0.3);
        }

        /* Knob Active */
        .toggle.active .knob {
            transform: translateX(60px); /* Move knob to the right */
            background: linear-gradient(145deg, #91EAE4, #86A8E7); /* Switch gradient */
            box-shadow: 0 10px 20px rgba(91, 250, 238, 0.8);
        }

Let’s not forget the ripple effect! Whenever you click the button, we’re going to have a soft ripple spread out from the center of the knob, making it look like you just activated something really high-tech. 💥 We’ll achieve this by using the before pseudo-element and a keyframe animation. The ripple will start small and then fade out as it expands. It’s all in the details, right?

/* Ripple Effect */
        .knob::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 7.5rem;
            height: 7.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .toggle.active .knob::before {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.5);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }

3. Adding JavaScript for the Toggle 🎛️

Now, let’s add the JavaScript that handles the theme-switching logic. This code listens for a click on the toggle button and switches between light and dark modes. 🌗

const toggle = document.querySelector('.toggle');
const body = document.body;
const icon = document.querySelector('.icon');

toggle.addEventListener('click', () => {
    toggle.classList.toggle('active');

    if (toggle.classList.contains('active')) {
        body.style.backgroundColor = '#1e1e2e'; // Dark mode
        icon.classList.replace('fa-sun', 'fa-moon'); // Moon icon
    } else {
        body.style.backgroundColor = '#ffffff'; // Light mode
        icon.classList.replace('fa-moon', 'fa-sun'); // Sun icon
    }
});

Here’s what this script does:

Click Event: When you click the toggle, the active class is added or removed.
Theme Switch: It switches between light and dark mode by changing the background color and toggling between the sun and moon icons. 🌞🌙

Also Read:

2024 CSS Buttons: Aurora Extreme Button, Expert in 5 Minutes

3 Creative CSS Loader Designs That Will Amaze Your Users

Mesmerizing CSS Cool Loading Animations: 3 Designs to Love

CSS Cool Loading Animation Code 🎨

And You’re Done! 🎉

You’ve just created a futuristic Light/Dark Mode toggle in 5 minutes! It’s responsive, smooth, and adds a modern touch to your website.

Just copy and paste the code snippets into your project, and you’ll have a stunning theme switcher ready to go. 🎨

Youtube Video Tutorial:

How to Create a Futuristic Light \ Dark Mode Toggle in 9 Minutes || Animate Hub

Source Code of Light or Dark Mode:

Want complete Source Code in a single file, So you won’t waste your energy copying again and again.

Then here it is.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic Toggle Button</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff; /* Default: Dark mode */
            font-family: 'Arial', sans-serif;
            transition: background 0.5s ease; /* Smooth transition for background */
        }

        /* Toggle Container */
        .toggle-container {
            position: relative;
        }

        /* Toggle Base */
        .toggle {
            width: 7.5rem;
            height: 3.75rem;
            background: linear-gradient(145deg, #28293e, #3a3b5e);
            border-radius: 3.125rem;
            display: flex;
            align-items: center;
            padding: 0.3rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        /* Knob */
        .knob {
            width: 3.125rem;
            height: 3.125rem;
            background: linear-gradient(145deg, #86A8E7, #91EAE4); /* Gradient effect */
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(134, 168, 231, 0.8);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
        }

        /* Icon */
        .icon {
            font-size: 1.5rem;
            color: #fff;
        }

        /* Toggle On State */
        .toggle.active {
            background: linear-gradient(145deg, #11172B, #1A1F40);
            box-shadow: 0 15px 35px rgba(0, 255, 233, 0.3);
        }

        /* Knob Active */
        .toggle.active .knob {
            transform: translateX(60px); /* Move knob to the right */
            background: linear-gradient(145deg, #91EAE4, #86A8E7); /* Switch gradient */
            box-shadow: 0 10px 20px rgba(91, 250, 238, 0.8);
        }

        /* Ripple Effect */
        .knob::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 7.5rem;
            height: 7.5rem;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .toggle.active .knob::before {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0.5);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }
    </style>
</head>
<body>

    <div class="toggle-container">
        <div class="toggle">
            <div class="knob">
                <i class="icon fa fa-sun"></i> <!-- Default: Moon icon -->
            </div>
        </div>
    </div>

    <script>
 // Select the toggle element and the body
const toggle = document.querySelector('.toggle');
const body = document.body;
const knob = document.querySelector('.knob');
const icon = document.querySelector('.icon');

// Add event listener to the toggle
toggle.addEventListener('click', () => {
    // Toggle the active class on the toggle
    toggle.classList.toggle('active');

    // Change the background color for light/dark mode
    if (toggle.classList.contains('active')) {
        body.style.backgroundColor = '#1e1e2e'; // Dark mode
        icon.classList.remove('fa-sun');
        icon.classList.add('fa-moon'); // Switch to moon icon
    } else {
        body.style.backgroundColor = '#ffffff'; // Light mode
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun'); // Switch to sun icon
    }
});

</script>

</body>
</html>

FAQs for Light or Dark Mode

What is Light or Dark Mode?
Light or Dark Mode allows users to switch between two color themes: a lighter one (light mode) and a darker one (dark mode). This is often used to reduce eye strain in low-light conditions.

How can I add a Light or Dark Mode toggle to my website?
You can add a Light or Dark Mode toggle using HTML, CSS, and JavaScript. By creating a button that switches styles dynamically, users can easily switch between light and dark themes. Check the code snippets provided above for a quick guide.

Why should I use a Dark Mode option on my website?
Dark Mode reduces eye strain in low-light environments and saves energy on OLED screens. It also provides a visually appealing option for users who prefer darker interfaces.

Can I customize the look of my Light or Dark Mode toggle?
Yes! You can fully customize the appearance of the toggle switch using CSS. You can change the button’s design, add animations, and even customize the icons for light and dark modes.

Does switching between Light and Dark Mode affect website performance?
No, toggling between light and dark mode does not affect the overall performance of your website. It simply switches the CSS styles dynamically using JavaScript, which is lightweight and quick.