Day/Night Sun-Moon Theme Toggle

Colours in this gradient

• #0f172a
• #f59e0b
• #38bdf8
• #ffffff

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="theme-stage" id="themeStage">
  <div class="theme-card">
    <div class="theme-title" id="themeModeLabel">Dark Mode Active</div>
    <div class="toggle-pill" id="themeToggleBtn" role="button" tabindex="0" aria-label="Toggle theme">
      <div class="toggle-track">
        <div class="star s1">✦</div>
        <div class="star s2">✦</div>
        <div class="cloud c1">☁</div>
      </div>
      <div class="toggle-thumb" id="toggleThumb">
        <div class="crater cr1"></div>
        <div class="crater cr2"></div>
      </div>
    </div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an animated day/night theme toggle switch in HTML, CSS and vanilla JavaScript.

Requirements:
- Large pill toggle with sun/moon thumb morphing.
- Moon state features crater textures and twinkling background stars.
- Sun state translates the thumb right, turns amber-gold with glowing shadow, and reveals cloud graphic.
- Stage background transitions between dark (#090d16) and light (#f1f5f9).

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Build toggle container with absolute thumb and decorative track elements.

2. 2

   Animate thumb position with cubic-bezier bounce easing.

3. 3

   Toggle is-light state on click with CSS transitions.

Customisation tips

• Use opacity transitions on crater and cloud details to cross-fade between day and night aesthetics.

More components