Skip to Content
BootstrapPartie 9 — Color modes & dark modeVue d'ensemble

Partie 9 — Color modes & dark mode

⏱️ TL;DR — Nouveauté phare de la 5.3 : les color modes. Un simple attribut data-bs-theme="dark" (sur <html>, ou n’importe quel conteneur) bascule tout Bootstrap en sombre. Le système repose sur les variables CSS et les couleurs adaptatives (text-body, bg-body-*, -subtle, -emphasis). On peut même définir ses propres thèmes.

🎯 Ce que vous saurez faire

  • Activer le dark mode global ou local.
  • Utiliser les couleurs adaptatives.
  • Créer un thème de couleur personnalisé.
  • Piloter le mode en JS avec persistance.

🗂️ Les chapitres

#ChapitreEn un mot
9.1Le dark mode natifdata-bs-theme, couleurs adaptatives
9.2Créer ses propres thèmesUn thème « custom » en Sass/CSS
9.3Piloter le mode en JSToggle + persistance + préférence système

Premier chapitre : 9.1 — Le dark mode natif

8.6 — Un build minimal9.1 — Le dark mode natif