sunMoon switch

index.html

<svg id='imgs'>
  <defs>
    <g id="star">
      <path id="path445" d="M 105.45181,97.567559 81.201944,94.103695 66.03057,113.33605 69.494434,89.086191 50.262075,73.914817 74.511938,77.378681 89.683312,58.146322 86.219448,82.396185 Z" transform="matrix(4.580287,-1.9961824,1.9961824,4.580287,-377.76186,-87.303715)" />
    </g>
    <g id="cloud">
      <path id="path732" d="M 26.278986,1.5907338 A 6.5048339,6.5048339 0 0 0 21.637438,3.5442992 2.6019338,2.6019338 0 0 0 20.161877,3.085288 2.6019338,2.6019338 0 0 0 17.612389,5.1745792 3.9029005,3.9029005 0 0 0 16.535692,5.0230272 3.9029005,3.9029005 0 0 0 14.865842,5.3993362 3.7921798,3.7921798 0 0 0 11.663848,3.6388712 3.7921798,3.7921798 0 0 0 8.391813,5.5164632 2.4081727,2.4081727 0 0 0 7.1797871,5.1888252 2.4081727,2.4081727 0 0 0 4.7715635,7.5970472 2.4081727,2.4081727 0 0 0 7.1797871,10.00527 2.4081727,2.4081727 0 0 0 8.5421786,9.5826642 a 3.7921798,3.7921798 0 0 0 3.1216694,1.6405678 3.7921798,3.7921798 0 0 0 1.510382,-0.316559 3.9029005,3.9029005 0 0 0 3.361462,1.92191 3.9029005,3.9029005 0 0 0 3.639639,-2.495277 6.5048339,6.5048339 0 0 0 6.103655,4.266821 6.5048339,6.5048339 0 0 0 6.462951,-5.8049028 3.4876985,3.4876985 0 0 0 2.920654,-3.440206 A 3.4876985,3.4876985 0 0 0 32.1749,1.8673274 3.4876985,3.4876985 0 0 0 29.915064,2.7018565 6.5048339,6.5048339 0 0 0 26.278986,1.5907338 Z" />
    </g>
    <circle id="hole" cx="50" cy="50" r="50" />
  </defs>
</svg>

<label id="switch">
  <input type="checkbox">
  <div class="sky" id="day">
    <svg width="100%" height="100%">
      <use xlink:href="#cloud" style="fill:#fff;transform:scale(6) translate(0px, 3px);" />
      <use xlink:href="#cloud" style="fill:#fff; opacity:0.6; transform:scale(7) rotate(-1deg) translate(-7px, 2px);" />
    </svg>
  </div>
  <div class="sky" id="night">
    <svg width="100%" height="100%">
      <use xlink:href="#star" style="transform:scale(0.03) translate(650px, 500px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.02) translate(1450px, 1500px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.025) translate(1500px, 1700px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.018) translate(1250px, 2000px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.028) translate(2000px, 600px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.021) translate(2200px, 1500px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.027) translate(2500px, 900px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.03) translate(2500px, 1350px);fill:#fff;"></use>
      <use xlink:href="#star" style="transform:scale(0.03) translate(2100px, 1500px);fill:#fff;"></use>
    </svg>
  </div>
  <div id="sunMoon">
    <div id="moon">
      <svg width="100%" height="100%">
        <use xlink:href='#hole' style='fill:#999; transform:scale(0.18) translate(40px, 100px);'></use>
        <use xlink:href='#hole' style='fill:#999; transform:scale(0.12) translate(180px, 50px);'></use>
        <use xlink:href='#hole' style='fill:#999; transform:scale(0.1) translate(300px, 250px);'></use>
      </svg>
    </div>
  </div>
</label>

style.scss

:root {
  --trans: all 0.6s ease-in-out;
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  background: #eee;
  &:has(#switch input:checked) {
    background: #555;
  }
  transition: var(--trans);
}

#imgs {
  display: none;
}

#switch {
  position: relative;
  display: block;
  width: 150px;
  height: 60px;
  border-radius: 30px;
  transition: 0.3s all ease-in-out;
  overflow: hidden;
  & > input {
    display: none;
  }
  div {
    width: 100%;
    height: 100%;
    transition: var(--trans);
    border-radius: 30px;
  }
  & > div {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3),
      inset -3px -3px 6px rgba(0, 0, 0, 0.6);
    & > svg {
      transition: var(--trans);
    }
  }
  #sunMoon {
    overflow: hidden;
    position: absolute;
    left: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    background: #e5e15a;
    border-radius: 100%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
      inset 3px 3px 3px rgba(255, 255, 255, 0.6),
      inset -3px -3px 3px rgba(0, 0, 0, 0.2);
  }
  .sky {
    background-size: 300px;
  }
  #day {
    opacity: 1;
    position: absolute;
    --hue: 210;
    background-image: radial-gradient(
      circle,
      hsl(var(--hue) 100% 90%) 0%,
      hsl(var(--hue) 100% 90%) 30%,
      hsl(var(--hue) 100% 85%) 32%,
      hsl(var(--hue) 100% 85%) 40%,
      hsl(var(--hue) 100% 80%) 42%,
      hsl(var(--hue) 100% 80%) 50%,
      hsl(var(--hue) 100% 75%) 52%,
      hsl(var(--hue) 100% 75%) 60%,
      hsl(var(--hue) 100% 70%) 62%,
      hsl(var(--hue) 100% 70%) 100%
    );
    background-position-x: 170px;
    svg {
      transform-origin: left top;
      transform: rotate(0deg);
    }
  }

  #night {
    opacity: 0;
    position: absolute;
    --hue: 210;
    background-image: radial-gradient(
      circle,
      hsl(var(--hue) 0% 50%) 0%,
      hsl(var(--hue) 0% 50%) 30%,
      hsl(var(--hue) 0% 45%) 32%,
      hsl(var(--hue) 0% 45%) 40%,
      hsl(var(--hue) 0% 40%) 42%,
      hsl(var(--hue) 0% 40%) 50%,
      hsl(var(--hue) 0% 35%) 52%,
      hsl(var(--hue) 0% 35%) 60%,
      hsl(var(--hue) 0% 30%) 62%,
      hsl(var(--hue) 0% 30%) 100%
    );
    background-position-x: -170px;
    svg {
      transform-origin: 500px 60px;
      transform: rotate(6deg);
    }
  }
  #moon {
    background: #bbb;
    position: relative;
    opacity: 0.8;
    left: 120%;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2),
      inset 3px 3px 3px rgba(255, 255, 255, 0.6),
      inset -3px -3px 3px rgba(0, 0, 0, 0.2);
  }
  &:has(input:checked) {
    #day {
      opacity: 0;
      background-position-x: 300px;
      svg {
        transform: rotate(15deg);
      }
    }
    #night {
      opacity: 1;
      background-position-x: -20px;
      svg {
        transform: rotate(0deg);
      }
    }
    #sunMoon {
      left: 95px;
    }
    #moon {
      left: 0;
      opacity: 1;
    }
  }
}

sunmoon-switch.markdown

sunMoon switch

A Pen by Lunar Dark on CodePen.

License.