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">
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);
}
}
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>
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
Pour fournir des couleurs de thème qui affectent le navigateur en dehors de la page Web, utilisez:
<meta>
Pour intégrer les préférences système d'un utilisateur concernant un thème clair ou sombre, utilisez:
(prefers-color-scheme)
Vous acceptez donc le thème sombre, mais toutes les entrées du formulaire le restent. Que pouvez-vous faire ?
<meta name="supported-color-schemes" content="light dark">
à votre balise HTML <head>
.html { color-scheme: light dark; }
à votre CSS.