Theme Toggle
I think the light and dark switch should be a small moment of delight, not just a checkbox. On desktop a sun and moon trade places with a rotation, and on phones I distil the whole thing down to a single half-filled disc.
Sun and moon, stacked
Both icons sit in the same box. The inactive one is rotated, scaled down, and faded out, while the active one sits upright at full size. Toggling the theme swaps which is which, and a shared cubic-bezier handles the cross-rotation so they appear to orbit past each other.
The sun’s rays
The eight rays are their own group with a transform-origin at the centre. As the icon becomes a moon I scale the rays toward zero, so the sun visibly retracts its light rather than just disappearing.
A different shape for phones
Thin-stroke icons read poorly at small sizes, so under 640px I hide the SVGs and let a crisp half-filled disc take over. Selecting dark mode rotates that disc 180°, sweeping the filled half to the other side: the same gesture, far more legible on a small screen.
Respecting motion settings
I drive every transition with one --anim custom property. Under prefers-reduced-motion that property drops to zero, so the toggle still works. It just changes state instantly instead of animating.