CSS : utiliser prefers-color-scheme pour proposer un thème sombre

Safari Technology Preview 68 expose une nouvelle media query, prefers-color-scheme, qui s’enquiert du mode d’apparence du système. Autrement dit, il est désormais possible de coordonner l’apparence d’un site à celle du système :

body {
    background: white;
    color: black;
}

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

Dans cet exemple, le texte noir sur fond blanc passe en blanc sur fond noir lorsque le mode d’apparence sombre est utilisé. Cette media query accepte trois valeurs :

• light pour les styles spécifiques au mode d’apparence clair ;
• dark pour les styles spécifiques au mode d’apparence sombre ;
• et no-preference.

Les navigateurs ne comprenant pas cette media query ignoreront ces styles. La media query prefers-color-scheme prend tout son sens lorsqu’elle est utilisée pour redéfinir des variables et changer l’apparence d’un site en bloc. Pour prendre l’exemple de Zinzolin :

:root {
    --first-color: #5f4B8b;
    --first-alt-color: #322749;
    --second-color: #d72d5c;
    --third-color: #0095c6;
    --fourth-color: #ffb025;
}

@media (prefers-color-scheme: dark) {
    :root {
        --first-color: #322749;
        --first-alt-color: #040307;
        --second-color: #ffb025;
        --third-color: #d72d5c;
        --fourth-color: #0095c6;
    }
}

Évidemment, cette media query ne sert pas seulement à surcharger des règles existantes, mais aussi à ajouter des règles exclusives à certains modes d’apparence. Exemple avec le simple filtre que j’applique pour diminuer la luminosité des images et ainsi améliorer le confort de lecture :

@media (prefers-color-scheme: dark) {
    img {
        filter: brightness(75%);
    }
}

Ces quelques règles me permettent de supprimer mon ancien « mode sombre », qui utilisait un script pour ajouter une classe à la balise body et un cookie pour enregistrer les préférences de l’utilisateur.

La media query prefers-color-scheme fonctionne uniquement dans Safari Technology Preview 68 sous macOS Mojave pour le moment, mais on peut espérer que Chrome et Firefox suivent, et il ne serait pas étonnant que la prochaine version d’iOS intègre un mode d’apparence sombre. Et en attendant, cela fait toujours un cookie de moins…