Trucsweb.com

Trucsweb.com

CSS

Bootstrap

RDFFav

Mode de couleurs (Color modes) Bootstrap 5

Changer dynamiquement le thème de couleur dit le mode de couleur du site Web deviens plus facile que jamais avec la dernière version Bootstrap 5.3.0.couleurs, contraste, bootstrap, thème, theme, color, accessibilitéMode de couleurs (Color modes) Bootstrap 5

Univers de Copernic

La dernière mouture du célèbre cadriciel Bootstrap intègre depuis la version 5.3.0 la gestion des modes de couleurs. Ce qui permet d’une part de gérer facilement le contraste des couleurs de la plupart des composantes avec les thèmes « sombre » (dark) et « clair » (light). Et d’autre part, de permettre de basculer d’un thème à l’autre d’un seul clic.

Par défaut Bootstrap est en mode clair. Pour passer en mode sombre, ajouter data-bs-theme="dark" dans la balise body :


<body data-bs-theme="dark">

C’est la même chose pour passer en mode clair :


<body data-bs-theme="light">

Ou directement dans un élément de la page ou un bloc de code HTML, par exemple un menu déroulant :


<div class="dropdown" data-bs-theme="dark">...</div>

<div data-bs-theme="dark" class="p-3 text-body bg-body">...</div>

On comprend qu’il suffit d’un script serveur pour ajuster la valeur du data-bs-theme avant de servir la page. Mais aussi un petit JavaScript pour permettre à l’usager de passer d’un thème à l’autre en changeant la valeur du data-bs-theme dynamiquement.

Sélecteur de thème

Même pas! Bootstrap offre aussi un petit bout de JavaScript qui permet de cibler les boutons pour basculer d’un thème à l’autre. Mieux, il gère même le localStorage pour garder en mémoire le choix de l’usager ! Rien à faire, que d’ajouter l’attribut global data-bs-theme-value!

La première étape consiste à intégrer le JavaScript, idéalement tout en bas du document (comme tout JavaScript devait se retrouver). Le JavaScript se trouve sur le site de Bootstrap « Color modes ».

Note : Si vous utilisez des requêtes @media media queries pour vos modes de couleur, le JavaScript devra probablement être adapté !

<button type="button" class="btn btn-dark" data-bs-theme-value="light">
  Clair
</button>

<button type="button" class="btn btn-dark" data-bs-theme-value="dark">
  Sombre
</button>

<button type="button" class="btn btn-dark" data-bs-theme-value="auto">
  Auto
</button>
Souk des teinturiers, Marrakech, Maroc

Exemple complet avec les boutons utilisés par Bootstrap :

J’ai fait un exemple qui intègre la plupart des possibilités. Notez que Bootstrap ajout un crochet #check2 sur le thème sélectionné. Je ne l’ai pas trouvé dans le code, mais c’est probablement un JavaScript puisque le crochet a par défaut la classe d-none (au lieu de le déclarer dans la feuille de style CSS par exemple).

Résultat : Exemple complet

Classes persos

Tout fonctionne automatiquement avec la plupart des composante (pas les boutons de couleur par exemple) et des classes Bootstrap v5.3.0. Et donc, vos classes personnelles doivent être déclaré dans tous les mode. Dans mon exemple précédent, j’ai créé une classe .btn-body pour s’adapter au thème.

Vous pouvez créer un bouton perso à la manière Bootstrap. Ou créer vos propres variables par thème.


<style>
/* Exemple de thème perso           */
/* pour le bouton du menu déroulant */

  /* Création des variables pour le thème sombre */
  [data-bs-theme="dark"] {
    --tw-btn-color: var(--bs-dark);
    --tw-btn-bg: var(--bs-white);
    --tw-btn-hover: var(--bs-gray);
  }
  /* Création des variables pour le thème clair */
  [data-bs-theme="light"] {
    --tw-btn-color: var(--bs-white);
    --tw-btn-bg: var(--bs-dark);
    --tw-btn-hover: var(--bs-gray);
  }
  /* Utilisation de la variable pour la classe .btn-body */
  .btn-body {
    background-color: var(--tw-btn-bg);
    color: var(--tw-btn-color);
  }
  .btn-body:hover {
    background-color: var(--tw-btn-hover);
    color: var(--tw-btn-color);
    }
</style>

<button class="btn btn-body">Bouton perso</button>

Conclusion

Avant cette fonctionnalité CSS3, maintenant supporté par Bootstrap, j’utilisais personnellement plusieurs feuilles de style. L’usager devait charger au complet un nouveau fichier à chaque fois ! Aujourd’hui, c’est un seul fichier qui comprend un minimum de code, essentiellement des variables.

Un monde de plaisir assurément, mais c’est aussi un outil d’accessibilité puissant! Notamment pour certaines personnes qui ont de la difficulté avec les contrastes, pour ceux pour qui le blanc est trop lumineux, un thème pour les daltoniens par exemple ou simplement pour ceux qui ont à cœur l’efficacité énergétique étant donné qu’un écran sombre consomme beaucoup moins d’énergie qu’un écran blanc!

Enfin, ça fait parti de l’expérience usager. Un outil de plus dans l’interface usager (IU)...

Références

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 61 - Pages vues : 74
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@