Herramientas CSS

Generador de funcion CSS light-dark()

Genera reglas CSS color-scheme y light-dark() para modo oscuro.

Cargando herramienta...

Qué es Generador de funcion CSS light-dark()?

Generador de funcion CSS light-dark() es una herramienta de navegador para esta tarea: Genera reglas CSS color-scheme y light-dark() para modo oscuro. La salida es fácil de revisar antes de usarla en un sitio publicado.

Quick answer

The light-dark() CSS function returns one of two color values based on the current color scheme, making it easy to support light and dark modes without duplicating CSS rules.

Limitations

  • light-dark() only works when the color-scheme property is set on the document or element. Without it the function defaults to the first color.
  • The function accepts exactly two color values -- one for light and one for dark. Complex theme switching still requires custom properties or media queries.
  • Older browsers do not support light-dark(). Provide a fallback color before the light-dark() function in the property declaration.

Cómo usar esta herramienta

  1. Abre la herramienta y escribe los valores necesarios.
  2. Revisa la salida en el panel de resultado.
  3. Copia solo la parte que encaja con tu página.
  4. Prueba el cambio antes de publicar.

Para qué puedes usarla

  • Resolver tareas repetidas de publicación con menos fricción.
  • Preparar marcado, CSS o checklists antes del lanzamiento.
  • Evitar pequeños errores comunes en sitios estáticos.

Errores comunes

  • Copiar la salida sin revisarla.
  • Usar URLs locales en lugar de URLs públicas finales.
  • No confirmar que el archivo esté en la carpeta publicada.

Verification

  1. Toggle the page between light and dark mode using DevTools Rendering or the OS setting and verify colors switch correctly.
  2. Test in a browser that does not support light-dark() to confirm the fallback color is applied.

FAQ

Preguntas sobre Generador de funcion CSS light-dark()

Generador de funcion CSS light-dark() funciona localmente?

Si. Las herramientas actuales están pensadas para generar salida en el navegador.

Debo probar el resultado?

Si. Revisa siempre la salida en tu plantilla, navegador y hosting.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también