9.2 — Créer ses propres thèmes

⏱️ TL;DR — Au-delà de light/dark, on peut inventer ses propres modes (data-bs-theme="sombre-bleu") en définissant les variables CSS sous le sélecteur [data-bs-theme="..."]. En Sass, on peut aussi générer un thème dark personnalisé via variables-dark et les maps -dark.

🎯 Objectifs

Créer un thème nommé en CSS.
Personnaliser le thème sombre en Sass.

Un thème custom en CSS pur


[data-bs-theme="marque"] {
  --bs-body-bg: #12101c;
  --bs-body-color: #e9e2ff;
  --bs-primary: #a884e0;
  --bs-primary-rgb: 168, 132, 224;
  --bs-border-color: #2a2440;
  --bs-secondary-color: #b3a9d6;
}


<html data-bs-theme="marque">…</html>

Vous réutilisez toute la mécanique de Bootstrap (composants, utilitaires) avec votre palette, sans recompiler le Sass.

Personnaliser le dark en Sass


@import "bootstrap/scss/functions";
 
// couleurs du mode clair
$primary: #7952b3;
 
@import "bootstrap/scss/variables";
 
// surcharger des variables du mode sombre
$primary-text-emphasis-dark:   #d0bcf0;
$primary-bg-subtle-dark:       #241d3a;
$body-bg-dark:                 #0f0d1a;
$body-color-dark:              #e9e2ff;
 
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap";

Les variables suffixées -dark pilotent l’apparence sous data-bs-theme="dark".

Étendre les maps de mode

Bootstrap utilise des maps comme $theme-colors-text-dark, $theme-colors-bg-subtle-dark, $theme-colors-border-subtle-dark pour générer les couleurs -emphasis/-subtle du mode sombre. On peut les fusionner pour ajuster une couleur précise en dark.

Bonnes pratiques

Gardez un contraste suffisant (WCAG AA) dans chaque thème — testez texte/fond.
Définissez toujours la version -rgb d’une couleur si vous l’utilisez en rgba().
Nommez vos thèmes clairement (data-bs-theme="high-contrast").

⚠️ Piège — Oublier --bs-primary-rgb quand vous surchargez --bs-primary : toutes les transparences (rgba(var(--bs-primary-rgb), …)) et certains fonds subtils tomberont sur l’ancienne couleur. Définissez toujours les deux.

💡 Pour un dev React — Un thème custom en CSS ([data-bs-theme="..."]) est le moyen le plus simple d’offrir plusieurs thèmes de marque dans une app React : vous changez juste la valeur de l’attribut sur <html> selon l’état, sans rebuild.

✏️ Exercices

Créer un thème « high-contrast » avec fond noir et texte blanc.

✅ Solution


[data-bs-theme="high-contrast"] {
  --bs-body-bg: #000; --bs-body-color: #fff; --bs-border-color: #fff;
}

Pourquoi définir --bs-primary-rgb en plus de --bs-primary ?

✅ Solution

Pour les couleurs semi-transparentes rgba(var(--bs-primary-rgb), α) et certains fonds subtils.

🧠 Quiz de révision

1. Comment définir un thème nommé en CSS ?

Sous le sélecteur [data-bs-theme="nom"], en redéfinissant les variables --bs-*.

2. Quel suffixe de variable Sass pilote le mode sombre ?

-dark (ex. $body-bg-dark).

3. Quel fichier Sass importer pour le mode sombre ?

variables-dark.

4. Que faut-il vérifier dans chaque thème ?

Le contraste (WCAG AA).

5. Faut-il recompiler pour ajouter un thème CSS custom ?

Non — un simple bloc CSS [data-bs-theme="..."] suffit.

Chapitre suivant : 9.3 — Piloter le mode en JavaScript