Vous êtes probablement déjà familiarisé avec les requêtes médiatiques. Ils sont largement utilisés pour rendre les sites Web réactifs. Les width et height Les propriétés contiennent les dimensions de la fenêtre. Nous utilisons ensuite CSS pour rendre différentes mises en page à différentes dimensions.
Les prefers-color-scheme media query fonctionne de la même manière. L’utilisateur peut configurer son système d’exploitation pour utiliser un thème clair ou sombre. prefers-color-scheme contient cette valeur. La valeur est soit light ou dark, bien que la spécification du W3C indique qu’elle pourrait prendre en charge des valeurs futures telles que sepia. Nous spécifions différentes valeurs de variables CSS pour les deux modes et laissons le système d’exploitation de l’utilisateur décider.
Les requêtes multimédias prefers-color-scheme
Les deux variantes du prefers-color-scheme les requêtes média sont :
/* Light mode */
@media (prefers-color-scheme: light) {
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}Dans le CSS ci-dessus, --body-bg et --body-color sont des variables CSS. Comme vous pouvez le voir, ils contiennent des valeurs différentes pour les deux modes. Dans le thème clair, nous définissons un fond blanc avec du texte noir. Dans le thème sombre, nous définissons un fond noir avec du texte blanc.
Étant donné que la spécification dit que le W3C pourrait introduire des valeurs futures, il est logique de convertir notre CSS en un booléen.
/* Light mode */
:root {
--body-bg: #FFFFFF;
--body-color: #000000;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
:root {
--body-bg: #000000;
--body-color: #FFFFFF;
}
}Dans le code ci-dessus, nous définissons un thème clair par défaut et le convertissons en thème sombre si la requête média est dark. De cette façon, toutes les valeurs futures ajoutées à la requête multimédia définiront le thème clair par défaut.
Utilisation des variables CSS
Maintenant que nous avons différentes valeurs pour différents thèmes, nous devons réellement les utiliser pour styliser notre page.
body {
background: var(--body-bg);
color: var(--body-color);
}Les var() la syntaxe est la façon dont CSS utilise les variables. Dans le code ci-dessus, nous disons que background doit être fixé à la valeur de --body-bg. Et color doit être fixé à la valeur de --body-color. Notez que les valeurs de ces variables proviennent de notre requête média, ce qui signifie que notre couleur d’arrière-plan et de premier plan change en fonction des paramètres du système d’exploitation ! C’est le vrai pouvoir de la requête média : fournir une expérience utilisateur cohérente du système d’exploitation à la page Web.
Si vous allez sur findmymastodon.com et changez le thème de votre système d’exploitation, vous verrez la transition d’un thème à l’autre. La vidéo ci-dessous montre la transition en douceur du mode clair au mode sombre sur Mac OS X.
Votre navigateur ne supporte pas cette vidéo.
Le site Web CSS WG utilise également les mêmes requêtes média. Modifiez le thème de votre système d’exploitation et le site Web changera de thème à ajuster.
Conclusion
Notez qu’en utilisant prefers-color-scheme n’est pas différent de l’utilisation d’un langage de programmation normal. Nous définissons des variables dont les valeurs changent en fonction d’une certaine logique. Ces variables sont ensuite utilisées pour d’autres opérations.
La possibilité de laisser votre site Web s’adapter au thème de choix de l’utilisateur est une excellente fonctionnalité d’accessibilité. Il brouille également davantage la frontière entre le bureau et le Web au profit de l’utilisateur. Prise en charge des dernières versions de navigateur prefers-color-scheme, vous pouvez donc commencer à expérimenter dès aujourd’hui.