Qué es Generador de funcion CSS light-dark()?
La funcion CSS light-dark() toma dos valores de color y selecciona automaticamente el primero para modo claro y el segundo para modo oscuro segun la propiedad color-scheme. Esto elimina la necesidad de bloques duplicados de propiedades personalizadas CSS o de un interruptor de tema JavaScript para soporte basico de modo oscuro.
Respuesta rápida
La funcion CSS light-dark() devuelve uno de dos valores de color segun el esquema de color actual, facilitando el soporte de modos claro y oscuro sin duplicar reglas CSS.
Last updated: 2026-05-25
Limitaciones
- Light-dark() solo funciona cuando la propiedad color-scheme esta establecida en el documento o elemento. Sin ella, la funcion usa por defecto el primer color.
- La funcion acepta exactamente dos valores de color: uno para claro y otro para oscuro. El cambio de tema complejo aun requiere propiedades personalizadas o media queries.
- Los navegadores antiguos no admiten light-dark(). Proporcione un color de fallback antes de la funcion light-dark() en la declaracion de propiedad.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Elija las propiedades de color que desea tematizar, como color de texto o fondo.
- Ingrese un color claro y un color oscuro para cada propiedad.
- La herramienta genera la declaracion color-scheme y las llamadas a la funcion light-dark().
- Copie el CSS y agregue la etiqueta meta color-scheme en el head de su pagina.
Para qué puedes usarla
- Agregar modo oscuro basico a un sitio estatico sin JavaScript.
- Crear pares de colores claro y oscuro para texto, fondos y bordes.
- Construir un sistema pequeno de tokens de diseno usando light-dark() para consistencia tematica.