Soft Sun Switch
A slim grey track with an oversized blue knob carrying a sun icon, built for dark interfaces.
Preview and code
index.html
<label class="soft"><input type="checkbox" role="switch" aria-label="Toggle"><span class="soft__track"></span><span class="soft__knob"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span></label>
styles.css
.soft{position:relative;display:inline-block;width:56px;height:32px}
.soft input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.soft__track{position:absolute;left:4px;right:4px;top:6px;height:20px;border-radius:20px;background:#8796a5;transition:background-color .3s ease}
.soft__knob{position:absolute;top:0;left:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#0b4fa8;color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.5);transition:transform .3s ease,box-shadow .3s ease}
.soft__knob svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.soft input:hover~.soft__knob{box-shadow:0 2px 5px rgba(0,0,0,.5),0 0 0 8px rgba(11,79,168,.28)}
.soft input:checked~.soft__track{background:#7fb0f0}
.soft input:checked~.soft__knob{transform:translateX(24px)}
.soft input:focus-visible~.soft__knob{box-shadow:0 0 0 3px #fff,0 0 0 6px #1659f5}
@media (prefers-reduced-motion:reduce){.soft__track,.soft__knob{transition:none}}About
The knob is larger than the track so it overhangs like a material-style thumb. A soft ring appears around it on hover and focus. The sun is an inline SVG that inherits the knob colour.