Thématisation

Même le branding peut être responsif. Vous pouvez ajuster la présentation de votre site Web en fonction des préférences de l'utilisateur. Mais commençons par voir comment étendre l'image de marque de votre site Web pour 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 couleurs 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 le head de vos pages.

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

Vous pouvez mettre à jour la valeur de theme-color à l'aide de JavaScript. Mais utilisez ce pouvoir à bon escient. Les utilisateurs peuvent être déroutés si le jeu de couleurs de leur navigateur change trop souvent. Pensez à des façons subtiles d'ajuster la couleur du thème. Si les changements sont trop brusques, les utilisateurs risquent de partir, 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.

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, listez 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 utilisera les informations de votre fichier manifeste pour afficher un raccourci approprié.

Proposer un mode sombre

De nombreux systèmes d'exploitation permettent aux utilisateurs de spécifier une préférence pour une palette de couleurs claires ou sombres. Il est donc judicieux d'optimiser votre site en fonction des préférences de thème de vos utilisateurs. 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é mé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é média prefers-color-scheme dans SVG. Si vous utilisez un fichier SVG pour votre favicon, il peut être ajusté pour le mode sombre. Thomas Steiner a écrit sur prefers-color-scheme dans les favicons SVG pour les icônes du mode sombre.

Thèmes avec des propriétés personnalisées

Si vous utilisez les mêmes valeurs de couleur à plusieurs endroits dans votre CSS, il peut être fastidieux de répéter tous vos 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 modifier la valeur d'une variable sans modifier 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);
}

Pour obtenir des exemples plus avancés de thèmes avec des propriétés personnalisées, consultez Créer un jeu de couleurs.

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);
}

Désormais, la couleur de vos icônes changera en même temps que celle des autres éléments de votre page.

Si vous souhaitez atténuer la luminosité de vos images photographiques 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);
  }
}

Pour certaines images, vous pouvez souhaiter les remplacer complètement en mode sombre. Par exemple, vous pouvez afficher une carte avec un jeu de couleurs plus sombres. 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>

Formulaires

Les navigateurs fournissent une palette de couleurs par défaut pour les champs de formulaire. Indiquez au navigateur que votre site propose un mode clair et un mode sombre. De cette façon, le navigateur peut fournir le style par défaut approprié pour les formulaires.

Ajoutez ce code à votre CSS :

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

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

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

Utilisez la propriété accent-color en CSS pour définir le style des cases à cocher, des boutons radio et de certains autres champs de formulaire.

html {
  accent-color: red;
}

Il est fréquent que les thèmes sombres utilisent 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;
  }
}

Il est judicieux d'utiliser une propriété personnalisée pour cela, afin de 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);
}

Proposer un mode sombre n'est qu'un exemple d'adaptation de votre site aux préférences de vos utilisateurs. Vous apprendrez ensuite à rendre votre site adaptable à toutes sortes de considérations liées à l'accessibilité.

Vérifiez vos connaissances

Tester vos connaissances sur les thèmes