La spécification CSS est en constante évolution. Le processus d’implémentation de nouvelles fonctionnalités dans CSS est compliqué: En termes simples, un groupe de travail CSS décide quels nouveaux éléments doivent être ajoutés à la spécification.

C’est ensuite aux navigateurs de mettre en œuvre ces nouveaux éléments, et les navigateurs choisissent l’ordre dans lequel ils doivent être mis en œuvre. Pour cette raison, nous avons maintenant un retard dans la prise en charge des nouvelles fonctionnalités. Bien que cela puisse parfois être ennuyeux, c’est une bien meilleure façon de le faire que de demander soudainement aux navigateurs d’implémenter toutes les spécifications, comme nous l’avons vu au début du Web.

Le groupe de travail CSS est composé de membres de tous les principaux fournisseurs de navigateurs et d’autres sociétés technologiques telles qu’Apple et Adobe. Apple voulait trouver un moyen de reconnaître son nouveau mode sombre dans le navigateur. À cette fin, Cupertino a envoyé une recommandation au cahier des charges pour une nouvelle demande média de niveau 5.

Besoin développeur & nbsp?Webmaster?Éditeur?

Soumettez gratuitement votre projet à Codeur.com, recevez quinze offres et choisissez le prestataire idéal.

Trouver un fournisseur

@media (prefers-color-scheme: light | dark)
{ … }

Grâce à cette requête multimédia, nous pouvons déterminer si l’utilisateur utilise actuellement le mode clair ou sombre dans son système d’exploitation.

Il existe plusieurs façons d’utiliser cette nouvelle requête CSS pour implémenter différents sujets. Nous allons maintenant en examiner 3 dans ce tutoriel.

Les paramètres de couleur permettent de gérer le mode sombre

Wikipédia mode nuit

Étape 1: Ajout de la fonction « Paramètres de couleur »

@media (prefers-color-scheme: dark) {
/* custom css */}

Étape 2: texte clair sur fond sombre

L’un des changements les plus importants est celui qui remplace la couleur d’arrière-plan et la couleur du texte:

body {
background-color : #1c1c1e ;
color : #fefefe ;
}

Attention

Pour éviter que le texte ne dépasse trop et pour le rendre plus subtil en mode sombre, il est recommandé d’éviter le texte blanc pur dans le texte. De même, il est conseillé d’éviter d’utiliser du noir pur comme arrière-plan.

Étape 3: désaturer les couleurs

Les couleurs d’accentuation (par exemple pour les liens) sur un fond blanc peuvent apparaître plus vives sur un fond sombre (en fonction de la couleur actuellement utilisée). Si tel est le cas, désaturer la couleur d’origine en une couleur moins saturée.

a {
color : #5fa9ee ;
}

Les images semblent également plus vives et, selon un sondage, la majorité des gens préféraient les images désaturées en mode sombre.

img {
filter: grayscale(20%);
}

Code final

@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #fefefe;
}
a {
color: #5fa9ee;
}
img {
filter: grayscale(20%);
}
}

Cette approche change les principaux composants, mais pas tous. En fonction du style de votre site et de son thème, il existe plusieurs autres classes / identifiants que vous devrez également modifier dans votre site. @media (Prefers-color-scheme: dark) pour passer complètement du mode clair au mode sombre.

Attention

Ce que nous venons de faire fonctionne parfaitement sur les petits sites Web. Cependant, cette méthode serait un cauchemar sur un projet plus vaste avec de nombreux éléments différents qui doivent tous être priorisés.

Il existe une autre approche que nous allons maintenant décrire en détail.

Besoin développeur & nbsp?Webmaster & nbsp?rédacteur & nbsp?

Soumettez gratuitement votre projet à Codeur.com, recevez quinze offres et choisissez le prestataire idéal.

Trouver un fournisseur

Utilisez un filtre CSS pour activer le mode sombre

Mode nuit du graphiste

L’une des valeurs que nous pouvons utiliser avec les filtres CSS est invert. Nous pourrions donc simplement appliquer cette valeur au code HTML et inverser toutes les couleurs, ce qui nous donnerait un « mode sombre ».

@media (prefers-color-scheme: dark) {
html {
filter: invert(100%);
}
}

Attention

Bien que la méthode « filtre » fonctionne avec le contenu de notre document, elle n’est pas encore très efficace – par exemple, l’ombre de certains éléments est également inversée. Nous avons perdu le contrôle des styles, ce qui devient un problème encore plus grave lorsque vous avez des arrière-plans colorés. Nous avons également un tout nouveau problème à prendre en compte en ce qui concerne les images. En fait, on les retrouve aussi à l’inverse, comme si on était retourné à l’époque du film et des négatifs.

Mettez votre site en mode sombre grâce aux propriétés personnalisées

Mode d'application Messenger sombre

Les méthodes que nous avons examinées nous font perdre le contrôle des styles ou nécessitent beaucoup de maintenance pour nous assurer que tout est mis à jour en mode sombre. Il existe une autre manière d’aborder la question: utiliser des « propriétés personnalisées » pour définir nos couleurs et les remplacer par une « requête média ».

Pour utiliser les propriétés personnalisées, nous les définissons ci-dessus dans notre CSS au sein de l’élément :root.

:root {
--background-color: #ededed;
--page-background: #fff;
--text-color: #212121;
--color-alpha: #c3423f;
}

Pour utiliser une propriété personnalisée, nous utilisons la syntaxe var(--custom-property-name).

body {
background-color: var(--background-color);
color: var(--text-color);
}
.content-container {
background-color: var(--page-background);
}
.text--alpha {
color: var(--color-alpha);

Nous pouvons maintenant ajouter à nouveau la « requête multimédia » et cette fois contourner les valeurs « Propriétés personnalisées ». Nous le placerons juste après avoir défini :rootDans la requête multimédia, nous pouvons maintenant simplement sélectionner de nouvelles valeurs pour toutes les couleurs en mode sombre.

@media (prefers-color-scheme: dark) {
:root {
--background-color: #111;
--page-background: #212121;
--text-color: #ededed;
--color-alpha: #50a8d8;
}
}

Le résultat

Grâce à cette méthode, nous conservons le contrôle de toute la feuille de style. Par exemple, les images ne sont pas affectées (vous pouvez facilement les désaturer).

Vous pouvez également utiliser un concepteur web indépendant pour mettre en toute sécurité votre site Web en mode sombre. Bénéficiez rapidement de nombreuses offres en publiant votre projet gratuitement sur Codeur.com.





Source link

Recent Posts