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

Oznog
Dernière mise à jour :

Commentaires

  • Salut Oznog ! Merci pour ton billet très bien expliqué. J'ai un souci sur un de mes projets. J'essaie de faire des thèmes custom dérivés du thème light par défaut. Avec un data-bs-theme="toto" et un data-bs-theme="titi" ou j'aimerai juste surcharger la primary. Ça ne fonctionne pas. J'ai utilisé la mixin @color-mode pour définir mes variable CSS mais rien y fait, je dois mal m'y prendre quelque part. Tu aurais une idée ?
    64x64
    Pooley
    Date (GMT) : 2023-07-25 16:02:17 (UTC +0000)
    Date local : Tue Jul 25 2023 18:02:16 GMT+0200 (heure d’été d’E
    • Salut Pooley, Mixin s'utilise uniquement avec un compilateur SASS. Pas avec les variables CSS ! SASS est le meilleur moyen, car il génère une nouvelle feuille de style à ton goût avec beaucoup de changement. Alors que les variables CSS, plus faciles, modifient en temps réel la feuille de style. C'est pratique pour quelques petits changements mineurs, mais ça devient très lourd pour un changement complet du thème. Sinon, c'est peut-être le mauvais choix de mot, mais si c'est vraiment avec SASS que tu galères, il me faudrait un exemple ? Et si c'est le cas, tu peux voir la feuille de style généré par SASS ?
      64x64
      oznog
      Date (GMT) : 2023-07-25 16:22:38 (UTC +0000)
      Date local : Tue Jul 25 2023 12:22:35 GMT-0400 (heure avancée d
      • Variable https://getbootstrap.com/docs/5.3/customize/color-modes/#variables SASS https://getbootstrap.com/docs/5.3/customize/color-modes/#sass-variables SASS Mixins https://getbootstrap.com/docs/5.3/customize/color-modes/#sass-mixins
        64x64
        oznog
        Date (GMT) : 2023-07-25 16:23:55 (UTC +0000)
        Date local : Tue Jul 25 2023 12:23:52 GMT-0400 (heure avancée d



    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 2 revues.
           Visites : 2474 - Pages vues : 2555
    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

    .
    @