Site icon Régis Enguehard

CSS : utiliser les thèmes CSS sombres

MacOS a introduit depuis quelques temps maintenant, le thème sombre dans son environnement. Généralement le thème sombre va nous permettre d’avoir un texte blanc sur fond noir. Typiquement ce sont les fenêtres des terminaux, nos IDE… sont déjà configuré de cette façon.

Aujourd’hui, seul Safari supporte une méthode CSS pour que nos sites profitent de cette technologie. Le W3C travaille déjà à la standardisation de cette méthode.

On peut également vérifier que cette méthode va arriver très rapidement chez Chrome et Firefox.

Cette nouvelle méthode s’utilise de la même façon qu’un media-query. La propriété pour supporter les préférences de couleurs est :

prefers-color-scheme

Elle peut prendre 3 valeurs :

On l’utilisera de cette manière :

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

Le thème WordPress que j’utilise a désormais un thème sombre de définit :

/* mode sombre */
@media (prefers-color-scheme: dark) {
    body {
        background: #212121;
        color: #fff;
    }
    .content-annina, #disqus_thread {
        background: #212121;
        -webkit-box-shadow: 0 0 2px rgba(255,255,255,1);
        box-shadow: 0 0 2px rgba(255,255,255,1);
    }
    a:hover, a:focus, a:active, .entry-title a {
        color: #fff;
    }
    button, input, select, textarea {
        color: #fff;
    }
}
Quitter la version mobile