# Eclipse Switch

> A deep indigo night pill with a crescent moon that turns into a glowing amber sun when switched on.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/eclipse-switch/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<label class="eclipse"><input type="checkbox" role="switch" aria-label="Day mode"><span class="eclipse__track"><span class="eclipse__knob"></span></span></label>
```

`styles.css`

```css
.eclipse{position:relative;display:inline-block;width:3.5em;height:2em;font-size:17px}
.eclipse input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.eclipse__track{position:absolute;inset:0;border-radius:2em;background:#2b1f6b;transition:background-color .4s ease}
.eclipse__knob{position:absolute;top:.3em;left:.3em;width:1.4em;height:1.4em;border-radius:50%;background:transparent;box-shadow:inset .45em -.15em 0 0 #ffd75e;transition:transform .4s cubic-bezier(.3,1.3,.5,1),box-shadow .4s ease,background-color .4s ease}
.eclipse input:checked+.eclipse__track{background:#8ec9ff}
.eclipse input:checked+.eclipse__track .eclipse__knob{transform:translateX(1.5em);background:#ffb300;box-shadow:inset 0 0 0 0 #ffd75e,0 0 0 .22em rgba(255,179,0,.35)}
.eclipse input:focus-visible+.eclipse__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.eclipse__track,.eclipse__knob{transition:none}}
```

## About

The moon is a transparent circle with an inset shadow, which draws the crescent without an image. Switching on fills the knob and swaps the track colour. Size it by changing font-size on .eclipse.

---
Also available as JSON: https://ownlyplans.com/bhaskar/eclipse-switch/?format=json
MCP server: https://ownlyplans.com/mcp