Theme-switch

Source: Uiverse ↗
Author: Type-Delta
Licence: MIT

Loading…

Code

<label
  for="themeToggle"
  class="themeToggle st-sunMoonThemeToggleBtn"
  type="checkbox"
>
  <input type="checkbox" id="themeToggle" class="themeToggleInput" />
  <svg
    width="18"
    height="18"
    viewBox="0 0 20 20"
    fill="currentColor"
    stroke="none"
  >
    <mask id="moon-mask">
      <rect x="0" y="0" width="20" height="20" fill="white"></rect>
      <circle cx="11" cy="3" r="8" fill="black"></circle>
    </mask>
    <circle
      class="sunMoon"
      cx="10"
      cy="10"
      r="8"
      mask="url(#moon-mask)"
    ></circle>
    <g>
      <circle class="sunRay sunRay1" cx="18" cy="10" r="1.5"></circle>
      <circle class="sunRay sunRay2" cx="14" cy="16.928" r="1.5"></circle>
      <circle class="sunRay sunRay3" cx="6" cy="16.928" r="1.5"></circle>
      <circle class="sunRay sunRay4" cx="2" cy="10" r="1.5"></circle>
      <circle class="sunRay sunRay5" cx="6" cy="3.1718" r="1.5"></circle>
      <circle class="sunRay sunRay6" cx="14" cy="3.1718" r="1.5"></circle>
    </g>
  </svg>
</label>

Prompt

Build "Theme-switch", a toggle animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes, inline SVG. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/Type-Delta/happy-mule-45 (Type-Delta, MIT).