HTML + CSSToggles
Day and night toggle
A switch where the sun rolls across a blue sky and becomes a moon on a starry night.
Settings
16px
1x
Code
<label class="uv-dn"><input type="checkbox"><span><i></i><b></b><b></b><b></b></span></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toggles
Where to use it
A day and night toggle is the friendliest way to offer a dark mode switch. It fits the header of a personal blog, a portfolio or a documentation site where you want the theme choice to have some character. The sun slides over, turns into a grey moon with craters, the sky goes deep blue and three stars appear.
It only changes its own look, so you still need to connect it to your site's light and dark styles. It's a bit wider than a normal switch; give it space in the header instead of squeezing it between menu links.