HTML + CSSToggles
Toggle día y noche
Un interruptor en el que el sol cruza un cielo azul y se convierte en luna en una noche estrellada.
Ajustes
16px
1x
Código
<label class="uv-dn"><input type="checkbox"><span><i></i><b></b><b></b><b></b></span></label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toggles
Dónde usarlo
Un toggle de día y noche es la forma más simpática de ofrecer el cambio a modo oscuro. Encaja en la cabecera de un blog personal, un portfolio o una web de documentación donde elegir tema puede tener carácter. El sol se desliza, se vuelve una luna gris con cráteres, el cielo oscurece y salen tres estrellas.
Solo cambia su propio aspecto, así que tendrás que conectarlo tú con los estilos claro y oscuro de tu web. Es algo más ancho que un interruptor normal: dale sitio en la cabecera en vez de meterlo entre los enlaces del menú.