Comment configurer un thème en mode sombre pour votre site Web

Chrome 76 a ajouté la prise en charge de la prefers-color-scheme Requête multimédia CSS, qui permet aux sites Web de demander à votre système d'exploitation le jeu de couleurs que vous préférez afin qu'ils puissent se mettre à thème de manière appropriée. Voici comment le configurer pour votre site Web.

Quels navigateurs prennent en charge les thèmes sombres?

Au moment de la rédaction, la plupart des principaux navigateurs prennent en charge le mode sombre, bien que certains navigateurs n'aient pas encore été mis à jour pour le prendre en charge. Vous pouvez vérifier l'état actuel sur caniuse.com, qui génère un tableau de support pour différents navigateurs:

Comme d'habitude, IE 11 ne reçoit aucune mise à jour et les 2% d'Internet encore bloqués dessus ne pourront pas s'en servir. Mais, ces personnes ne sont probablement pas sur Windows 10, donc elles ne verraient aucune utilisation de toute façon sans un thème sombre à basculer.

Heureusement, en utilisant prefers-color-scheme ne cassera pas votre CSS, car il s'agit d'un paramètre facultatif.

Comment utiliser la prise en charge du jeu de couleurs CSS

Pour utiliser réellement prefers-color-scheme dans votre CSS, vous l'utiliseriez comme une requête multimédia facultative, de la même manière que pour une conception réactive. Par exemple, si votre valeur par défaut est un fond blanc avec du texte noir, vous pouvez utiliser la requête multimédia pour passer en arrière-plan noir et en texte blanc.

body {
  background-color: #fff;
  color:#000;
}

@media (prefers-color-scheme: dark) {
  background-color: #000;
  color:#fff;
}

Vous pouvez combiner cela avec toute autre technique que vous utilisez. Par exemple, vous ne pouvez autoriser le mode sombre sur les appareils mobiles que si vous le combinez avec une requête multimédia réactive pour la taille de l'écran.

Configurer un thème sombre avec des variables CSS

Les variables CSS sont un ajout assez récent avec un support étendu. Ils sont peut-être le moyen le plus simple de créer un thème sombre avec prefers-color-scheme. Au lieu de définir des valeurs de couleur manuellement, comme ceci:

body {
  background-color: #fff;
}

p {
  color: #000;
}

Créez plutôt un :root bloc qui s'appliquera partout. Vous pouvez définir des variables ici en utilisant le double trait d'union (--) suivi du nom de la variable. Ensuite, chaque fois que vous devez définir une valeur, utilisez le nom de la variable à l'intérieur du var() fonctionner à la place:

:root {
  --primary: #000;
  --background: #fff;
}

body {
  background-color: var(--background);
}

p {
  color: var(--primary);
}

Cette méthode a le merveilleux avantage de pouvoir changer ces variables et de refléter les changements partout. Juste en dessous du :root bloc, permet d'ajouter un autre à l'intérieur du prefers-color-scheme requête média:

:root {
  --primary: #000;
  --background: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ddd;
    --background: #222
  }
}

body {
  background-color: var(--background);
}

p {
  color: var(--primary);
}

Cela réinitialise les variables aux valeurs sombres si le navigateur détecte que l'utilisateur préfère un schéma sombre. Vous pouvez gérer ces deux palettes de couleurs et les ajuster facilement en changeant simplement les variables.

De plus, si vous avez besoin de CSS supplémentaire pour le thème sombre, vous pouvez le placer dans un autre prefers-color-scheme , bien que vous souhaitiez probablement placer celui-ci sous le reste du CSS afin qu'il ait la priorité, ou utiliser le !important drapeau.

Remplacement pour IE 11

IE 11 ne prend pas cela en charge (évidemment). Si vous souhaitez fournir une prise en charge d'IE 11, vous pouvez utiliser la méthode ancienne de doubler vos propriétés:

p {
 color: #000;
 color: var(--primary);
}

De cette façon, IE 11 ne traitera que le premier et considérera l'autre comme CSS non valide. Les thèmes sombres ne fonctionneront pas, mais ils ne le seraient pas de toute façon car il n'y a pas de support pour la requête média.

De plus, si vous ne voulez pas du tout utiliser de variables CSS, vous pouvez simplement recadrer complètement votre site dans le prefers-color-scheme requête, mais c'est maladroit et gaspille de l'espace. Si vous devez prendre en charge tous les navigateurs existants, utilisez plutôt la double propriété de secours.