Day/Night Theme Toggle

Creating a delightful day/night theme toggle animation

Overview

Theme toggles are everywhere these days, but they often feel mechanical and utilitarian. I wanted to create something more engaging—a toggle that captures the essence of transitioning from day to night, making the interaction feel more natural and playful.

The result is a toggle that combines smooth animations, subtle glowing effects, and background scenes to create a more immersive experience. This design was inspired by Suhad M's Day and Night mode toggle switch on Dribbble.

Day and Night mode toggle switch animation

Component Structure

The Animation Magic

Sun glow
Moon glow
Day Scene
Night Scene

Background Scenes

Day scene background
Day scene background
Day scene background
Day scene background
Description: Day scene: A cartoon-style illustration...
File Name: /day.png
Dimensions: 0 x 0
File Size: 0 KB
Day scene: A cartoon-style illustration...
Night scene background
Night scene background
Night scene background
Night scene background
Description: Night scene: The beach under the moonlight...
File Name: /night.png
Dimensions: 0 x 0
File Size: 0 KB
Night scene: The beach under the moonlight...

Accessibility Considerations

  • Proper ARIA labels that update based on the current theme
  • Keyboard navigation support
  • High contrast ratios for visibility
  • Meaningful state indicators beyond just color

Conclusion

A theme toggle doesn't have to be just functional—it can be an opportunity to delight users and enhance the overall experience of your application. By combining smooth animations, thoughtful design, and proper accessibility considerations, we've created a toggle that's both practical and enjoyable to use.

Try It Yourself

Click the toggle to switch between light and dark themes!