Un thème sombre avec prefers-color-scheme (CSS)

By Léo Penaguin 22 juillet 2019

Salut !

Vous savez peut-être déjà ce qu’est une media query. C’est simplement des « conditions » en CSS qui permettent de styliser des composants HTML en fonction des écrans avec lesquels vos visiteurs voient votre site. Un petit exemple histoire de perdre personne :

.sea {
    background-color: green;
}

@media screen and (max-width: 800px) {
    .sea {
        background-color: blue;
    }
}

C’est très simple, ici, vous avez l’élément avec la classe .sea qui est vert. MAIS il devient bleu lorsque l’écran (la fenêtre en fait) de l’utilisateur est inférieur a 800px. C’est donc un super outil pour le responsive.

prefers-color-scheme

Attention, à l’heure ou j’écris ces lignes, tout les navigateurs ne supporte pas encore cette fonctionnalité.

« prefers-color-scheme » s’utilise comme n’importe quelle autre media query, sauf que la propriété va aller interroger le thème de votre navigateur. Par exemple, si vos visiteurs ont configuré un thème sombre sur Firefox, Chrome ou Safari, vous allez pouvoir récupérer cette information et modifier des couleurs en conséquence (par exemple) dans le CSS :

html {
    background: white;
    color: grey;
}

@media (prefers-color-scheme: dark) {
    html {
        background: blue;
        color: white;
    }
}

Ici, je change les couleurs de fond et du texte de l’élément body en remplaçant les couleurs par défaut lorsque le thème est sombre. C’est vraiment sympa et j’espère que beaucoup vont s’intéresser à cette nouvelle fonctionnalité et l’implémenter ! 😁

Bonne journée !

Commentaires 💬