Tema claro/oscuro CSS
Genera variables CSS para modo claro y oscuro con tus colores. Código listo para copiar, gratis y sin registro.
Resultado
¿Cómo usar esta herramienta?
Genera variables CSS para modo claro y oscuro.
Escribe tus datos, pulsa Generar CSS y obtén el resultado al instante. Puedes copiarlo con el botón «Copiar resultado». Todo se calcula en tu navegador: tus datos no salen de tu dispositivo.
Preguntas frecuentes
¿Cómo genero el modo oscuro?
Define los colores de fondo, texto y acento para el modo claro y el oscuro; pulsa Generar CSS para obtener las variables listas.
¿Qué genera exactamente?
Variables CSS que cambian según el tema, normalmente con la clase .dark o la media query prefers-color-scheme.
¿Detecta la preferencia del sistema?
Sí, usa prefers-color-scheme para respetar la preferencia del sistema del usuario automáticamente.
¿Necesito registrarme para usarla?
No. Funciona al instante en tu navegador, sin cuentas ni contraseñas.
Herramientas relacionadas de Color y diseño
Grid CSS
Crea layouts con CSS Grid: columnas, filas y espacios con vista previa.
Usar gratisFlexbox
Genera contenedores flexibles con la alineación y el espaciado que elijas.
Usar gratisEscala de espaciado 8pt
Sistema de espaciado basado en múltiplos de 8 (8pt grid) para interfaces consistentes.
Usar gratisSombra de texto
Crea text-shadow personalizadas con vista previa en vivo.
Usar gratisDegradado animado
Fondo con degradado en movimiento: elige colores y velocidad, copia la animación CSS.
Usar gratisNombres de colores HTML
Tabla de referencia con los 148 nombres de colores CSS y su código HEX.
Usar gratis