Todos los lugares donde puede usar la consulta de medios de esquema de colores preferidos: Amit Merchant: un blog sobre PHP, JavaScript y más.

Todos los lugares donde puede usar la consulta de medios de esquema de colores preferidos: Amit Merchant: un blog sobre PHP, JavaScript y más.

La capacidad de cambiar entre el modo claro y oscuro es una de las características más solicitadas en la web. La mayoría de los navegadores modernos vienen con muchas funciones y API que pueden ayudarlo a identificar el esquema de color que el usuario está usando actualmente.

Una de estas características es la prefers-color-scheme solicitud de los medios.

Esta consulta de medios se puede utilizar en varios aspectos de un sitio web para que el cambio entre esquemas de color sea más fluido y granular.

Aquí están todos los lugares donde puede usar esta consulta de medios.

Índice
  1. En CSS
  2. En Javascript
  3. Imágenes dependientes del esquema de color
  4. Favicons dependientes del esquema de color

En CSS

Este es el lugar más obvio donde puede usar el prefers-color-scheme solicitud de los medios. Puedes usarlo así.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

Como puede ver, el CSS anterior se aplicará cuando el usuario ponga su sistema en modo oscuro. El color de fuente y el color de fondo se cambiarán en consecuencia.

En Javascript

Si desea realizar ciertas acciones cuando cambia de modo, puede agregar un detector de eventos alrededor del prefers-color-scheme consulta de medios como esta.

window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', ({ matches }) => {
		const newColorScheme = e.matches ? "dark" : "light";
    console.log(`Changed to ${newColorScheme} mode`);
});

O si solo desea verificar el esquema de color actual, puede hacerlo así.

const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
  ? 'dark'
  : 'light';

Imágenes dependientes del esquema de color

También puede utilizar el prefers-color-scheme Consulta de medios para cargar imágenes según el esquema de color del usuario. Por ejemplo, puede cargar un logotipo de modo oscuro cuando el usuario ha configurado su sistema en modo oscuro.

<picture>
  <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)" />
  <img src="logo-light.png" alt="Logo" />
</picture>

Como puede ver, para que esto funcione necesitamos usar el <picture> elemento donde podemos especificar múltiples <source> elementos con diferentes srcset modalidad. El navegador cambiará automáticamente entre las imágenes según el esquema de color del usuario usando el prefers-color-scheme solicitud de los medios.

Aquí hay un CodePen que demuestra lo mismo.

Vea las imágenes de cambio de lápiz óptico basadas en el modo claro/oscuro de Amit Merchant (@amit_merchant) en CodePen.

Favicons dependientes del esquema de color

También puede utilizar el prefers-color-scheme consulta de medios para cargar favicons según el esquema de color del usuario.

Por ejemplo, puede cargar un favicon de modo oscuro cuando el usuario ha configurado su sistema en modo oscuro.

<link rel="icon" href="favicon-light.png" />
<link
  rel="alternate icon"
  href="favicon-dark.png"
  media="(prefers-color-scheme: dark)"
/>

El navegador cambiará automáticamente entre favicons según el esquema de color del usuario.


¿Conoces algún otro lugar donde se pueda usar? Házmelo saber en los comentarios.

Si quieres conocer otros artículos parecidos a Todos los lugares donde puede usar la consulta de medios de esquema de colores preferidos: Amit Merchant: un blog sobre PHP, JavaScript y más. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas