Preferencias de usuario
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 está usando 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);
}Para poder cambiar el theme del navegador, desde las herramientas de desarrollador debemos ir a: More Tools --> Rendering --> Emulate CSS media feature preferes-color-scheme.
prefers-reduced-motion
Otra de las características que podemos usar dentro de las preferencias de usuario en las @media es si el usuario ha desactivado o no las animaciones o transiciones. Para ello, dentro de la regla @media miraremos si en prefers-reduced-motion tiene los valores no-preference o reduce. (Dentro de rendering también)
@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, también podríamos poner animation-name a none para que no haya.
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
CSS prefers-contrast detecta si un usuario ha solicitado un mayor o menor contraste en su sistema operativo para que el contenido web pueda adaptarse.
<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.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfil con light-dark()</title>
<link rel="stylesheet" href="5. light-dark.css">
</head>
<body>
<div class="profile-card">
<div class="profile-header">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQXZ6Vw-Br-RRvMstTlTqbeGXw4PNepXRrTzg&s" alt="Foto de perfil de Alex Doe">
</div>
<div class="profile-body">
<h2>Super Mario</h2>
<p class="job-title">Desarrollador Frontend</p>
<p class="bio">Apasionado por crear interfaces de usuario intuitivas y experiencias web memorables con tecnologías modernas.</p>
<div class="stats">
<div>
<strong>1.2K</strong>
<span>Seguidores</span>
</div>
<div>
<strong>580</strong>
<span>Siguiendo</span>
</div>
<div>
<strong>92</strong>
<span>Proyectos</span>
</div>
</div>
<a href="#" class="btn-primary">Seguir</a>
</div>
</div>
</body>
</html>