Personnalisation des thèmes

Même le branding peut être responsif. Vous pouvez adapter la présentation de votre site web en fonction des préférences de l'utilisateur. Mais tout d'abord, voici comment étendre le branding de votre site Web de façon à inclure le navigateur lui-même.

Personnaliser l'interface du navigateur

Certains navigateurs vous permettent de suggérer une couleur de thème en fonction de la palette de votre site Web. L'interface du navigateur s'adapte à la couleur que vous suggérez. Ajoutez la couleur dans un élément meta nommé theme-color dans l'élément head de vos pages.

<meta name="theme-color" content="#00D494">

Remarque : Il peut sembler un peu étrange de placer des informations de style comme celles-ci en HTML plutôt qu'en CSS, mais cela permet au navigateur de mettre à jour son interface dès que la page est en cours de chargement au lieu d'attendre le code CSS.

Trois sites Web sont consultés dans le navigateur Safari. Chacun d'eux a sa propre couleur de thème qui s'intègre à l'interface du navigateur.

Vous pouvez mettre à jour la valeur de theme-color à l'aide de JavaScript. Mais utilisez ce pouvoir à bon escient. Si le jeu de couleurs de leur navigateur change trop souvent, les utilisateurs peuvent se sentir dépassés. Réfléchissez à des façons subtiles d'ajuster la couleur du thème. Si les changements sont trop brusques, les utilisateurs partiront agacés.

Vous pouvez également spécifier une couleur de thème dans un fichier manifeste d'application Web. Il s'agit d'un fichier JSON contenant des métadonnées sur votre site Web.

Créez un lien vers le fichier manifeste à partir de l'head de vos documents. Utilisez un élément link avec une valeur rel de manifest.

<link rel="manifest" href="/manifest.json">

Dans le fichier manifeste, répertoriez vos métadonnées à l'aide de paires clé/valeur.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Si un visiteur décide d'ajouter votre site Web à son écran d'accueil, le navigateur utilise les informations de votre fichier manifeste pour afficher le raccourci approprié.

Remarque : Découvrez comment ajouter un fichier manifeste d'application Web.

Fournir un mode sombre

De nombreux systèmes d'exploitation permettent aux utilisateurs d'indiquer leurs préférences pour une palette de couleurs claires ou sombres. Nous vous conseillons d'optimiser votre site en fonction de leurs préférences de thème. Vous pouvez accéder à cette préférence dans une fonctionnalité multimédia appelée prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Spécifiez les couleurs du thème avec la fonctionnalité multimédia prefers-color-scheme dans l'élément meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

Vous pouvez également utiliser la fonctionnalité multimédia prefers-color-scheme dans le format SVG. Si vous utilisez un fichier SVG pour votre favicon, vous pouvez l'ajuster pour le mode sombre. Thomas Steiner a abordé les prefers-color-scheme dans les favicons SVG pour les icônes du mode sombre.

Thématisation avec des propriétés personnalisées

Si vous utilisez les mêmes valeurs de couleur à plusieurs endroits de votre CSS, il peut s'avérer assez fastidieux de répéter tous les sélecteurs dans une requête média prefers-color-scheme.

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

Utilisez des propriétés CSS personnalisées pour stocker vos valeurs de couleur. Les propriétés personnalisées fonctionnent comme des variables dans un langage de programmation. Vous pouvez mettre à jour la valeur d'une variable sans mettre à jour son nom.

Si vous mettez à jour les valeurs de vos propriétés personnalisées dans une requête média prefers-color-scheme, vous n'aurez pas à écrire tous vos sélecteurs deux fois.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Consultez la section Créer un jeu de couleurs pour obtenir des exemples plus avancés de thématisation avec des propriétés personnalisées.

Images

Si vous utilisez des SVG dans votre code HTML, vous pouvez également y appliquer des propriétés personnalisées.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Maintenant, vos icônes changeront de couleur avec les autres éléments de votre page.

Si vous souhaitez atténuer la luminosité de vos photos lorsqu'elles sont affichées en mode sombre, vous pouvez appliquer un filtre en CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

L'effet est subtil, mais vous pouvez atténuer la luminosité des images en mode sombre.

Pour certaines images, vous pouvez les remplacer complètement en mode sombre. Par exemple, vous pouvez afficher une carte avec un jeu de couleurs plus sombre. Utilisez l'élément <picture> contenant un élément <source> avec la requête média prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Deux versions de la même carte, une pour le mode clair et une pour le mode sombre.

Formulaires

Les navigateurs proposent une palette de couleurs par défaut pour les champs de formulaire. Indiquez au navigateur que votre site propose à la fois un mode sombre et un mode clair. Le navigateur peut ainsi fournir le style par défaut approprié pour les formulaires.

Ajoutez ceci à votre CSS:

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

Vous pouvez également utiliser le langage HTML. Ajoutez ce code dans la section head de vos documents:

<meta name="supported-color-schemes" content="light dark">

Utilisez la propriété accent-color dans CSS pour définir le style des cases à cocher, des cases d'option et d'autres champs de formulaire.

html {
  accent-color: red;
}

Il est courant que les thèmes sombres aient des couleurs de marque discrètes. Vous pouvez modifier la valeur accent-color pour le mode sombre.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Nous vous recommandons d'utiliser une propriété personnalisée pour conserver toutes vos déclarations de couleur au même endroit.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Remarque : Pour savoir comment teinter des éléments avec des couleurs de thème, consultez la section Plus de teintes.

Fournir un mode sombre n'est qu'un exemple d'adaptation de votre site aux préférences de vos utilisateurs. Vous allez maintenant apprendre à adapter votre site à toutes sortes de considérations liées à l'accessibilité.

Testez vos connaissances

Tester vos connaissances sur les thèmes

Pour fournir des couleurs de thème qui affectent le navigateur en dehors de la page Web, utilisez:

CSS

Les informations sur le thème CSS risquent de provoquer un flash de couleur normale, ce qui nuit à l'expérience utilisateur.

JavaScript

Uniquement si vous l'utilisez pour mettre à jour une balise <meta> "theme-color".

Un fichier manifeste d'application Web

manifest.json peut être fourni et inclut des champs permettant de spécifier les couleurs du thème afin de teinter l'apparence de l'application ouverte depuis un écran d'accueil mobile.

Une balise <meta> "theme-color"

Un navigateur peut détecter cette couleur de thème dès que possible dans la balise <head>, ce qui évite les flashs de couleur indésirables.

Pour correspondre aux préférences système d'un utilisateur concernant un thème clair ou sombre, utilisez:

Requête média "(prefers-color-scheme)"

Transmettez la valeur que vous souhaitez vérifier, comme clair ou sombre, et vous êtes prêt à l'utiliser.

JavaScript

Celle-ci utilise ensuite la syntaxe de requête média CSS pour demander l'état actuel de la préférence.

Vous acceptez donc le thème sombre, mais toutes les entrées de formulaire conservent le thème clair. Que pouvez-vous faire ?

Ajoutez html { color-scheme: light dark; } à votre CSS.

Il indique au CSS que les entrées du formulaire doivent correspondre au jeu de couleurs du système.

Ajoutez <meta name="supported-color-schemes" content="light dark"> à votre balise HTML <head>.

Dans le code HTML, cela indique que les entrées du formulaire doivent correspondre au jeu de couleurs du système.

Écrivez un tas de code CSS pour modifier toutes les valeurs par défaut de l'entrée.

Cela fonctionne aussi, mais c'est un peu plus difficile.