Circular theme reveal

Use it for

• Light and dark mode toggles in a header or settings panel
• Any switch between two visual modes of the same content

Avoid

• Toggles that change layout, not just colour, since the two copies will not line up
• Pages with heavy content, where rendering a second copy is costly

How it works

On click the button centre and the distance to the farthest panel corner are measured. A second copy of the panel in the new theme mounts on top with clip-path circle(0px) at that point, and on the next frame the radius is set to the full distance so a clip-path transition grows it. On transitionend the base panel switches theme and the overlay unmounts. Here it is scoped to one panel; for a whole site the same idea works with the View Transitions API.

Accessibility

The toggle is a real button whose aria-label names the theme it will switch to, and focus stays on it because the base panel never remounts. The overlay copy is aria-hidden with no focusable elements. Reduced motion swaps the theme instantly.