Hire us

TutorialsWeb Design

Light Dark Mode Toggles: 9 Animated Switches I Built with CSS

Ramanpal SinghCo-Founder & Co-CEO

Updated 5 min read

Light Dark mode Toggles
Need developers? 50%off your first project Websites, web apps, mobile and desktop apps on fixed quotes. Grab this coupon Applies to your first fixed quote only.

I built nine dark mode toggles to give you more ways to switch between light and dark. The collection includes a house rocker, a hanging rope, magic particles, and an emoji face that falls asleep. Each design sits inside its own interactive 4:5 canvas. Below, you can see every switch’s features and copy its complete HTML, CSS, and JavaScript.

Key Takeaways

  • I built all nine switches with HTML, CSS, and JavaScript, without third-party runtime libraries.
  • Each switch includes both light and dark states inside a 4:5 canvas.
  • You can choose from physical controls, celestial effects, and an expressive emoji face.
  • Every entry includes the full HTML, CSS, and JavaScript in separate code blocks.
  • I included keyboard focus styles, switch state labels, and reduced motion support.
  • You can run any example by saving its three code blocks as index.html, styles.css, and script.js in the same folder, then opening index.html.

1. 3D Wall Switch

I gave this toggle the look of a real house switch. You press the rocker to turn the lights on or off, and the canvas changes with it.

Features:

  • A raised ceramic plate with recessed edges and screw details.
  • Sun and moon icons with ON and OFF labels.
  • A rocker that tilts in opposite directions for light and dark mode.
  • A warm daylight background that changes to a dark night background.

Demo

2. 3D Magic Particle Switch

I added a sliding knob and a burst of particles to this switch. You get a short trail of movement each time you change the mode.

Features:

  • A rounded track with a raised knob and soft violet shading.
  • Sun and moon symbols that change with the selected mode.
  • Ten particles with different movement paths and delays.
  • Light lavender and deep violet canvas backgrounds.

Demo

3. Hanging Rope Light Switch

I used a brass pull handle suspended from the top of the canvas. You click or tap the handle, and it performs a pulling animation as the light changes.

Features:

  • A textured rope that hangs from the top edge.
  • A brass handle with grooves, highlights, and shadows.
  • A downward tug followed by a spring motion.
  • An expanding ripple and separate light and dark backgrounds.

Demo

4. 3D Sun and Moon Toggle

I made the sun itself the control in this version. When you press it, the rays fold inward and a cratered moon rotates into view.

Features:

  • A sculpted sun with twelve raised rays.
  • A moon with four crater details.
  • Rotation, scaling, and fading during the transition.
  • A peach daytime canvas and a dark blue canvas with stars.

Demo

5. Sunglasses and Sleeping Emoji Toggle

I gave this toggle a face that changes its expression with the theme. You see sunglasses and a smile in light mode, then sleepy eyes and floating Z characters in dark mode.

Features:

  • A rounded yellow face with dimensional shading.
  • Sunglasses that lift away when you switch to dark mode.
  • Closed eyes, a small open mouth, and Z characters for the sleeping state.
  • Separate daylight and night palettes for the face and canvas.

Demo

6. Day and Night Landscape Switch

I put a small landscape inside a pill switch. You move from clouds and a bright sun to stars, a moon, and blue hills with one press.

Features:

  • A miniature landscape with three mountain layers.
  • A sliding sun that becomes a cratered moon.
  • Clouds that fade out as stars appear.
  • A raised frame with highlights, shadows, and a glass effect.

Demo

7. Metal Eclipse Dial

I used a circular metal dial for this version. You click it to rotate the rim and move a dark disc across the glowing sun.

Features:

  • A metal finish with fine ticks and a position marker.
  • A bezel that rotates between the two states.
  • An eclipse effect inside a circular window.
  • A pale blue light canvas and a deep navy dark canvas.

Demo

8. 3D Desk Lamp Switch

I added a reading lamp with a warm pool of light. You press the lamp to turn the glow off or on, and the shade responds with a small nod.

Features:

  • An orange shade, angled stem, and rounded base.
  • A glowing bulb, light cone, and soft floor illumination.
  • A brief nod animation when you change the mode.
  • A dark state that dims the lamp and removes its light.

Live code preview

9. 3D Arcade Power Button

I finished the collection with a raised amber button. You press it to switch modes, and the dome compresses before it springs back.

Features:

  • An amber button with a glossy highlight and a power symbol.
  • A recessed socket on a plate with screw details.
  • A spring press animation that also runs after keyboard activation.
  • An indicator light and ON or OFF readout that follow the theme.

Live code preview

Frequently Asked Questions (FAQs)

How do I keep dark mode enabled after refreshing the page?

You can save the theme with localStorage.setItem() and restore it with localStorage.getItem() on page load. The examples above return to their starting states when you reload; my gallery saves its separate page theme. MDN documents localStorage.

How do I detect system dark mode with JavaScript?

You can read window.matchMedia('(prefers-color-scheme: dark)').matches. I use explicit starting states in these examples so you can compare the designs. MDN explains the system color preference.

Can a manual toggle override the system color preference?

Yes. You can apply your selected theme through a data attribute and give its CSS rules precedence over the system-based styles. MDN describes the light and dark preference values.

How do I reduce the switch animations?

You can use @media (prefers-reduced-motion: reduce) to shorten or remove movement. I included reduced motion rules in every example above. MDN explains reduced motion preferences.

Final Thoughts

I like how these nine switches give the same action different personalities. You can choose a familiar rocker, a playful face, or a small day and night landscape. Pick the one that fits your page, copy its three code blocks, and try both modes. Adjust the colors and timing until the switch feels right to you.

Written by

Ramanpal Singh

Co-Founder & Co-CEO

Raman is a digital marketing expert with over 8 years of experience. He has a deep understanding of various digital marketing strategies, including affiliate marketing. His expertise lies in technical SEO, where he leverages his skills to optimize websites for search engines and drive organic traffic. Raman is passionate about staying up-to-date with the latest industry trends and sharing his knowledge to help businesses succeed in the online world.

More posts by Ramanpal Singh

Keep reading

Need developers? 50%off your first project Websites, web apps, mobile and desktop apps on fixed quotes. Grab this coupon Applies to your first fixed quote only.

First project offer

Get 50% off your first project

The discount applies to your first fixed quote only. Send your brief and get your fixed quote by email.

Get a fixed quote

Step 1 of 3 · What do you need?

Get a fixed quote

50% off your first project. Applies to your first fixed quote only.

What do you need?

Pick an option to see its starting price and typical timeline.