Thématisation

Même l’image de marque peut être réactive. Vous pouvez adapter la présentation de votre site Web aux préférences de l'utilisateur. Tout d'abord, voici comment étendre la marque de votre site Web afin d'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 suggérée. Ajoutez la couleur dans un élément meta nommé theme-color dans la section head de vos pages.

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

<ph type="x-smartling-placeholder">

</ph>

Vous pouvez mettre à jour la valeur de theme-color à l'aide de JavaScript. Mais utilisez cette puissance à 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 moyens subtils d'ajuster la couleur du thème. Si les modifications sont trop bouleversantes, les utilisateurs partiront agaçants.

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 concernant votre site Web.

Lien vers le fichier manifeste de la 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 utilisera les informations du fichier manifeste pour afficher un raccourci approprié.

Fournir 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, ce qui est une bonne idée pour optimiser votre site en fonction des préférences de thème de l'utilisateur. 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 en SVG. Si vous utilisez un fichier SVG pour votre favicon, vous pouvez le régler pour le mode sombre. Thomas Steiner a écrit sur 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 dans votre code CSS, il peut être 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 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 besoin d'é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 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 vont changer leurs couleurs en même temps que les autres éléments de votre page.

Si vous souhaitez atténuer la luminosité de vos photos en mode sombre, vous pouvez appliquer un filtre en CSS.

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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 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>

<ph type="x-smartling-placeholder">

</ph>

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. De cette façon, le navigateur peut 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 ceci dans la section head de vos documents:

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

Utilisez la propriété accent-color dans CSS pour appliquer un style aux cases à cocher, aux cases d'option et à certains autres champs de formulaire.

html {
  accent-color: red;
}

Il est courant que les thèmes sombres présentent des couleurs feutrées de la marque. Vous pouvez modifier la valeur accent-color pour le mode sombre.

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

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

Fournir un mode sombre n'est qu'un exemple d'adaptation de votre site aux préférences de l'utilisateur. Vous allez maintenant apprendre à adapter votre site à toutes sortes de critères d'accessibilité.

Testez vos connaissances

Tester vos connaissances sur la thématisation