Day/Night Toggle

<!-- Day/Night Toggle · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<label class="tgs"><input type="checkbox" class="tgs__in" /><span class="tgs__track"><span class="tgs__thumb"></span><svg class="tgs__sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><g stroke-width="2"><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/></g></svg><svg class="tgs__moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></span></label>
</div>

/* Day/Night Toggle · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.tgs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tgs__in{position:absolute;opacity:0;pointer-events:none}
.tgs__track{position:relative;width:104px;height:50px;border-radius:50px;background:#0a0a0a;transition:background .45s cubic-bezier(.4,.1,.2,1);box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.tgs__in:checked+.tgs__track{background:#F5480F}
.tgs__thumb{position:absolute;top:5px;left:5px;width:40px;height:40px;border-radius:50%;background:#fff;transition:transform .45s cubic-bezier(.4,.1,.2,1);box-shadow:0 3px 8px rgba(0,0,0,.3);z-index:2}
.tgs__in:checked+.tgs__track .tgs__thumb{transform:translateX(54px)}
.tgs__sun,.tgs__moon{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;transition:opacity .4s,transform .4s}
.tgs__sun{right:11px;fill:none;stroke:#FFD15C;stroke-width:2;stroke-linecap:round;opacity:0}.tgs__moon{left:12px;fill:#cfe0ff}
.tgs__in:checked+.tgs__track .tgs__sun{opacity:1}.tgs__in:checked+.tgs__track .tgs__moon{opacity:0}