Botón de modo oscuro para sitio web
Elige los colores de los dos temas. El código trae las variables CSS, el script que evita el parpadeo y el botón accesible con aria-pressed.
Cómo usarTema claro y oscuro con un botón
1. No <head>, antes do CSS
2. CSS
3. Botón y script, en el cuerpo de la página
Disponible en: 
Botón de modo oscuro para sitio web: para qué sirve
El modo oscuro se volvió estándar en los celulares, y mucha gente espera que los sitios lo acompañen. Este generador arma el tema claro y oscuro con variables CSS y prefers-color-scheme, de modo que el sitio siga al sistema solo, más un botón para que la persona elija otro tema solo en tu sitio.
El código viene en tres partes: una línea para el head que aplica la elección guardada antes de que la página aparezca (sin el destello de tema equivocado), el CSS con color-scheme para que los campos y las barras de desplazamiento acompañen, y el botón con aria-pressed e íconos de sol y luna.
Cómo usar
- Elige los colores del tema claro y del oscuro.
- Prueba el botón en la vista previa.
- Pega la línea en el head, el CSS y el botón en el lugar correcto.
Cuándo usar
- Blog y sitios de contenido.
- Sistemas y paneles.
- Portafolio de desarrollador.
Preguntas frecuentes
¿Cómo evitar el destello de tema claro al cargar?
El script que lee la elección guardada debe ejecutarse en el head, antes de que la página aparezca. El código viene separado en dos partes: una línea para el head y el botón para el cuerpo de la página.
¿Qué hace color-scheme?
Le avisa al navegador si la página es clara u oscura, para que también ajuste las barras de desplazamiento, los campos de formulario y el fondo predeterminado. Sin él, el modo oscuro queda con campos blancos que desentonan.
¿Se necesita botón si el sitio ya sigue el sistema?
No es obligatorio: solo con prefers-color-scheme el sitio ya acompaña el tema del celular o de la computadora. El botón es útil para quien quiere un tema distinto al del sistema solo en tu sitio.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.