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 ».
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>
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
Références
- Color modes - Bootstrap
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!![[Photo]](http://www.trucsweb.com/documents/images/2021/riopelle-70197.webp)
![[Photo]](https://www.trucsweb.com/documents/images/2020/bootstrap5.png)
![[Photo]](http://www.trucsweb.com/documents/images/2020/v_2009-11-13b.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2019/volcan-2.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2018/upload.png)
![[Photo]](http://www.trucsweb.com/documents/images/2017/bootstrap4-stack.png)
![[Photo]](http://www.trucsweb.com/documents/images/2020/pictogrammes-police.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2016/modal-pdf.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2015/bootstrap4.png)
![[Photo]](http://www.trucsweb.com/documents/images/2015/framework.png)
![[Photo]](http://www.trucsweb.com/documents/images/2014/photo100.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/responsive-screen-mockup-pack.jpg)
![[Photo]](http://www.trucsweb.com/documents/images/2014/boostrap-components.png)
AbuseIPDB
Connexion
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)...