Preferencias de usuario
preferes-color-scheme prefers-reduced-motion prefers-reduced-transparency prefers-contrast light-dark()

<< CSS container queries Rules >>

Dentro del punto de media queries tenemos la posibilidad no sólo de detectar el tamaño de la pantalla del dispositivo sino ciertas preferencias del usuario como son el tema (dark mode / light mode), evitar transiciones, reducción de datos de descarga(prefers-reduced-data, pero todavía no tiene soporte en los navegadores).

preferes-color-scheme

Dentro de la regla @media, tenemos al posibilidad de detectar si el usuario tiene preferencia por el tema dark o light y así poderle dar un estilo u otro a nuestra web con prefers-color-scheme.

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --foreground-color: #eee;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #eee;
        --foreground-color: #111;
    }
}
body{
    background-color: var(--background-color);
    color: var(--foreground-color);
}

prefers-reduced-motion

Otra de las características que podemos usar dentro de las preferencias de usuario es conocer si el usuario prefiere eliminar o desactivar las animaciones o transiciones. Para ello, dentro de la regla @media miraremos si en prefers-reduced-motion tiene los valores no-preference o reduce.

@media (prefers-reduced-motion: reduce) {
    :root {
        --preferred-animation: soft;
    }
}

.animated {
    animation: var(--preferred-animation, hard) 2s linear infinite;
}

Al tener la característica de prefers-reduced-motion desactivada(reduce) estamos diciendo que la animación sea soft, o podríamos poner animation-name a none para que no haya.

Recuerdo que para activar esta opción en chrome debéis ir en las herramientas de desarrollador a la pestaña de Rendering

prefers-reduced-transparency

Esta propiedad está experimental, pero se utiliza para ver si el usuario ha seleccionado reducir los efectos de transparencia, facilitándole un mejor contraste y por tanto visibilidad.

<div class="translucent">translucent box</div>

prefers-contrast

Se utiliza para ver si el usuario a activado que la web se presente con un contraste mayor o menor.

<div class="contrast">low contrast box</div>

light-dark()

Podemos modificar los colores de nuestra web con esta función en lugar de usar @media prefers-color-scheme. El usuario definirá qué color-scheme quiere usar mediante el sistema operativo (light o dark) o mediante el navegador.

A la función light-dark(), le pasaremos dos valores, y dependiendo del color del tema que tenga activado el usuario cogerá uno de ellos. El primero parámetro deberá ser el valor del color que queremos que tenga en el caso de tener el tema light, en caso contrario cogerá el segundo parámetro. light-dark(light-color, dark-color)

Para que la función light-dark() funcione, debemos definirnos la propiedad color-scheme con los valores light dark. Esta variable habitualmente se define en la pseudo-clase :root.

@import url("contenido.css");
* {
  margin: 0;
  padding: 0;
}

:root{
  color-scheme: light dark;

  --dark-menu: #0d6efd;
  --light-menu: #0dcaf0;
  --h2-dark: #0dcaf0;
  --h2-light: #0d6efd;
  --light-bg: white;
  --dark-bg: black;
}

header{
  background-color: light-dark(var(--light-menu), var(--dark-menu));
  color: light-dark(var(--h2-light), var(--h2-dark));
  text-align: center;
}