Aprende a definir automáticamente el esquema de color de su sitio web según la preferencia del usuario en el sistema operativo.

Cómo detectar si el usuario prefiere un esquema de color claro u oscuro en el navegador con JavaScript y CSS

En los últimos días, compré una Mac que tenía instalado MacOS Mojave. Curiosamente, en algunos sitios web que solían tener un fondo blanco cuando los visitaba en Windows, sin embargo, en mi Mac, el fondo del sitio web era oscuro. Esto sucede debido al esquema de color preferido en Mac, que es oscuro en mi caso. No sabía que había una forma de detectar esto en su sitio web, sin embargo, quiero compartir con usted cómo hacerlo fácilmente con CSS o JavaScript.

A. Con CSS

La función de medios CSS prefiere el esquema de color le permite detectar en el navegador si el usuario prefiere  un tema de color claro u oscuro según la configuración del sistema operativo. La sintaxis CSS es la siguiente, por ejemplo, si el usuario prefiere el esquema oscuro, debería poder establecer un fondo oscuro con el siguiente CSS:

@media (prefers-color-scheme: dark) {
    body { 
        background: black; 
    }
}

O uno claro:

@media (prefers-color-scheme: light) {
    body { 
        background: white; 
    }
}

B. Con JavaScript

Si prefiere ejecutar algún código JavaScript de acuerdo con la preferencia del usuario, puede verificar esta condición verificando si el navegador admite matchMedia y verificar si la condición del esquema de color oscuro coincide:

const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

const userPrefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;

if(userPrefersDark){
    console.log("User prefers a dark interface");
}

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores