Pure CSS Day and Night Theme Toggle Switch with Animated Sun, Moon, Stars, and Clouds

Modern websites often offer a light/dark theme toggle for better accessibility and user comfort. If you’re looking for a stylish and interactive way to switch between day and night modes, this advanced toggle switch built with only HTML and CSS is a perfect solution.

This unique theme switch button combines animated visuals such as:

• A glowing sun

• A sliding moon with crater spots

• Moving clouds

• Appearing stars

And the best part? No JavaScript is needed.

What This Theme Switcher Does

The toggle starts in day mode:

• Blue background represents the sky

• Fluffy clouds float at the bottom

• A bright yellow sun icon appears in the circle

When clicked:

• The background smoothly turns dark

• Clouds slide down out of view

• Stars rise up and twinkle in the background

• The sun morphs into a moon with detailed crater spots

The entire transformation is handled using CSS transitions, ::before, and key CSS properties for layout and animation.

Key Features

1. Pure HTML + CSS Only

This theme switcher works without any JavaScript. It uses a hidden checkbox to toggle styles and trigger the animation flow using :checked selectors in CSS.

2. Highly Customizable

All design elements such as:

• Toggle size

• Background colors

• Moon and sun styling

• Animation timing

…are controlled via CSS custom properties (variables), making the component easily adjustable for your site’s theme.

3. Responsive & Lightweight

Because it’s built entirely with HTML and CSS, the component is lightweight and works across modern browsers with excellent performance on both desktop and mobile.

How It Works Behind the Scenes

• A <label> wraps the entire component and uses a hidden <input type="checkbox"> to toggle between day and night.

• When the checkbox is checked, CSS rules apply dark theme colors, hide the clouds, and reveal the stars.

• The circular slider (sun/moon) smoothly glides from left to right and changes its visual representation using nested divs.

• Stars are drawn with inline SVG paths and styled via fill: currentColor for flexibility.

• The moon’s craters are created using .spot elements with carefully placed absolute positions.

Perfect For:

• Personal portfolios

• Blogs and content-heavy websites

• Dashboards and admin panels

• Mobile web apps that support dark mode

This toggle is not just functional — it’s visually rich, delightful, and sure to impress your visitors.

Conclusion

Offering a theme toggle switch is no longer just a luxury — it’s becoming an expectation. This fully animated CSS day-night toggle button makes your site feel more interactive and engaging while giving users control over their experience.

You can easily implement it in your project and even connect it to CSS variables or a JS-based theme system if needed later.