Skip to Content
BootstrapPartie 9 — Color modes & dark mode9.1 — Le dark mode natif

9.1 — Le dark mode natif

⏱️ TL;DR — Mettez data-bs-theme="dark" sur <html> : tout Bootstrap passe en sombre. Le même attribut sur un conteneur ne bascule que cette portion (dark mode « localisé »). Pour que vos éléments suivent, utilisez les couleurs adaptatives : text-body, text-body-secondary, bg-body, bg-body-tertiary, et les -subtle/-emphasis.

🎯 Objectifs

  • Activer le dark mode global et local.
  • Choisir des couleurs qui s’adaptent au thème.
  • Éviter les couleurs « en dur ».

Activer globalement

<html lang="fr" data-bs-theme="dark">
  <!-- toute la page en sombre -->
</html>

data-bs-theme accepte light (défaut) ou dark. Bootstrap redéfinit alors ses variables CSS (--bs-body-bg, --bs-body-color…) pour la version sombre.

Dark mode localisé

<div data-bs-theme="dark" class="p-4 rounded">
  Cette carte est sombre, même si la page est claire.
</div>

Extrêmement pratique : une navbar sombre, un encart sombre dans une page claire, etc. Le thème cascade aux enfants.

Couleurs adaptatives (indispensables)

Pour que vos éléments suivent le thème, bannissez les couleurs figées et utilisez :

À la place de…Utilisez…
text-dark / text-blacktext-body
text-mutedtext-body-secondary
bg-whitebg-body
bg-lightbg-body-tertiary
couleurs vives en fondbg-*-subtle + text-*-emphasis
<div class="bg-body-tertiary text-body p-3 rounded">
  S'adapte automatiquement au clair et au sombre.
</div>
<div class="bg-success-subtle text-success-emphasis p-2 rounded">
  Succès, lisible dans les deux modes.
</div>

Composants

La plupart des composants (card, navbar, dropdown, modal…) sont déjà adaptatifs : ils lisent les variables du thème courant. Une navbar se met en sombre avec data-bs-theme="dark" (plus besoin de navbar-dark).

⚠️ Piège — Vous passez en dark mode mais certains blocs restent blancs/illisibles ? Ils utilisent des couleurs figées (bg-white, text-dark). Remplacez-les par les variantes body/subtle/emphasis.

💡 Pour un dev React / Next.js — Posez data-bs-theme sur <html> via votre logique de thème (contexte, next-themes). Attention au SSR : pour éviter le flash clair→sombre, appliquez l’attribut le plus tôt possible (script inline dans <head>) — voir 9.3.

✏️ Exercices

  1. Rendre une seule section sombre au milieu d’une page claire.

✅ Solution

<section data-bs-theme="dark" class="bg-body text-body p-4">…</section>.

  1. Un encart de succès lisible dans les deux modes.

✅ Solution

<div class="bg-success-subtle text-success-emphasis p-3 rounded">…</div>.

🧠 Quiz de révision

1. Quel attribut active le dark mode ?

data-bs-theme="dark".

2. Peut-on l’appliquer à une seule partie de la page ?

Oui, sur n’importe quel conteneur (il cascade aux enfants).

3. Par quoi remplacer text-muted pour l’adaptatif ?

text-body-secondary.

4. Par quoi remplacer bg-light ?

bg-body-tertiary.

5. Une navbar sombre en 5.3 : quelle méthode ?

data-bs-theme="dark" (les classes navbar-dark sont obsolètes).

Chapitre suivant : 9.2 — Créer ses propres thèmes

Vue d'ensemble9.2 — Créer ses propres thèmes