¿Qué es prefers-color-scheme?

prefers-color-scheme es una característica de medios de CSS que indica a los sitios web si prefieres un tema oscuro o claro. Los navegadores obtienen esta información de la configuración del modo oscuro de tu sistema en Windows, macOS, Linux, Android o iOS, y los sitios cambian sus colores con @media (prefers-color-scheme: dark) en CSS o window.matchMedia("(prefers-color-scheme: dark)") en JavaScript. Si un sitio sigue mostrándose claro mientras tu sistema está en modo oscuro, lo primero que debes comprobar es qué información proporciona realmente tu navegador.

Descripción de la herramienta

Esta herramienta muestra el tema de tu sistema en un bloque grande: Oscuro, con una luna, o Claro, con un sol. Pregunta al navegador si coincide con prefers-color-scheme: dark y escucha los cambios, así que, cuando cambias entre el modo oscuro y el claro en la configuración de tu dispositivo, el resultado se actualiza de inmediato, sin necesidad de recargar la página. Todo lo que no se indique como oscuro se muestra como Claro.

La respuesta refleja lo que tu navegador comunica a los sitios web, que no siempre coincide con la configuración de tu sistema. Firefox, por ejemplo, tiene una opción de apariencia de los sitios web que puede hacer que todos los sitios se muestren claros u oscuros, independientemente de la configuración del sistema.

Características

  • Muestra de un vistazo si el tema es Oscuro o Claro
  • Se actualiza en tiempo real cuando cambias el tema de tu sistema
  • Funciona en tu navegador, sin necesidad de instalar nada