Personnaliser

Modes de couleur

L’attribut data-bs-theme bascule l’interface entre un thème clair et un thème sombre. Cauri fournit un thème sombre complet : composants standards, composants BDU .cauri-* et couleurs de marque lisibles sur fond sombre.

Comment ça fonctionne

Cauri définit deux jeux de variables CSS : celui du thème clair (sur :root et [data-bs-theme=light]) et celui du thème sombre (sur [data-bs-theme=dark]). Un jeu s’applique à l’élément qui porte l’attribut et à tous ses descendants. Les composants lisent ces variables (--bs-body-color, --bs-body-bg, --bs-border-color…) : changer l’attribut change leur aspect, sans classe supplémentaire.

Le thème sombre définit aussi color-scheme: dark, ce qui assombrit les éléments natifs du navigateur (barres de défilement, listes déroulantes).

data-bs-theme="light" : thème clair, valeur par défaut.
data-bs-theme="dark" : thème sombre.

Appliquer le mode sombre à toute la page#

<html lang="fr" data-bs-theme="dark">

Mode sombre sur une section#

L’attribut peut se poser sur n’importe quel élément. Ici, seule la carte est sombre ; le reste de la page reste clair. Les boutons pleins gardent leurs couleurs de marque ; les contours, les liens et les textes colorés passent au bleu et au vert clairs, lisibles sur fond sombre.

Compte épargne

Solde disponible : 2 450 000 FCFA

Voir le détail

<div data-bs-theme="dark" class="bg-body text-body rounded p-4">
  <h3 class="h5">Compte épargne</h3>
  <p class="mb-3">Solde disponible : 2 450 000 FCFA</p>
  <div class="d-flex align-items-center gap-2">
    <button type="button" class="btn btn-primary">Verser</button>
    <button type="button" class="btn btn-outline-primary">Historique</button>
    <a class="link-primary" href="#">Voir le détail</a>
  </div>
</div>

Pour une barre de navigation colorée, posez l’attribut sur la barre : le texte et le bouton de menu mobile passent en clair.

<nav class="navbar navbar-expand bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">BDU</a>
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Comptes</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Épargne</a></li>
    </ul>
  </div>
</nav>

Ce qui est pris en charge aujourd'hui

Ce qui est pris en charge aujourd'hui
Élément	État	Détail
Fond et texte de la page	Pris en charge	`--bs-body-bg`, `--bs-body-color`, couleurs secondaires et tertiaires, `--bs-emphasis-color`
Liens	Pris en charge	Le bleu des liens est éclairci pour rester lisible sur fond sombre
Bordures et fonds subtils	Pris en charge	`--bs-border-color`, `--bs--bg-subtle`, `--bs--border-subtle`
Boutons, formulaires, cartes, tableaux, alertes, modales, menus, listes, pagination	Pris en charge	Ils lisent les variables ci-dessus. Les couleurs pleines (`btn-primary`, `text-bg-primary`) restent identiques dans les deux modes.
Accordéon, bouton de fermeture, carrousel, `form-select`, `form-switch`	Pris en charge	Icônes et flèches ont une variante sombre
Barre de navigation	Pris en charge	`data-bs-theme="dark"` sur `.navbar`
Composants BDU `.cauri-*`	Pris en charge	En-tête, carte produit, simulateur, titre de marque et listes à coches suivent le thème
Contours, liens et textes de couleur (`btn-outline-primary`, `link-danger`, `text-success`…)	Adaptés par Cauri	Bleu, vert et rouge clairs sur fond sombre, contraste d’au moins 4,5:1 (voir ci-dessous)
Classes à couleur fixe (`btn-outline-dark`, `link-dark`, `text-dark`, `bg-white`, `bg-light`, `bg-black`)	Non adaptées	Elles gardent la même couleur dans les deux thèmes, par définition. Préférez `text-body-emphasis`, `link-body-emphasis`, `bg-body`, `bg-body-secondary`, `bg-body-tertiary`, `btn-outline-light` sur fond sombre.

Ce que Cauri ajoute au thème sombre

Le bleu et le vert de marque sont trop foncés pour servir de texte ou de contour sur un fond sombre : ils n’y atteignent qu’environ 3:1. En thème sombre, Cauri les remplace donc par leurs versions claires (#8DB6EE et #8CCB66) pour les contours de boutons, les liens colorés et les textes colorés. Les boutons pleins gardent leurs couleurs et leur texte blanc.

Palette nocturne : fond, surfaces, bordures et texte sont des variables Sass ($cauri-dark-bg, $cauri-dark-surface, $cauri-dark-raised, $cauri-dark-line, $cauri-dark-text) branchées sur les variables sombres du système.
Couleurs de marque claires : $cauri-blue-light et $cauri-green-light.
Variables CSS : --cauri-blue, --cauri-green, --cauri-text… changent de valeur sous [data-bs-theme=dark] ; utilisez-les dans vos propres styles pour suivre le thème.
Import partiel : les règles sombres des composants BDU sont dans scss/components ; celles des contours, des liens et des textes de marque sont dans scss/accents.

Vingt-sept couples de couleurs sont contrôlés par le test automatisé, dont onze pour le thème sombre. Le rouge de danger a lui aussi une version claire (#EA868F). La couleur d’avertissement garde sa valeur d’origine, déjà lisible sur fond sombre. La barre supérieure .cauri-topbar reste bleue dans les deux thèmes.

Proposer un sélecteur de mode#

Ce script respecte d’abord le choix mémorisé, puis le réglage du système. Placez-le dans le head pour éviter un éclair de page claire au chargement.

const racine = document.documentElement;

const memorise = localStorage.getItem('theme');
const systeme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
racine.setAttribute('data-bs-theme', memorise ?? systeme);

document.querySelector('#bascule-theme').addEventListener('click', () => {
  const suivant = racine.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
  racine.setAttribute('data-bs-theme', suivant);
  localStorage.setItem('theme', suivant);
});

Sans JavaScript : suivre le système

Avec l’option Sass $color-mode-type: media-query, le mode sombre s’applique automatiquement quand le système est en mode sombre, sans attribut. Dans ce cas, l’attribut data-bs-theme ne pilote plus rien : le choix est celui du système. Voir Options Sass. Pour retirer entièrement le mode sombre du CSS, utilisez $enable-dark-mode: false.

Comment tester

Ouvrez la page et, dans la console du navigateur, exécutez document.documentElement.setAttribute('data-bs-theme', 'dark').
Parcourez la page : cherchez les textes peu lisibles, les fonds restés clairs, les bordures qui disparaissent. Les composants BDU doivent apparaître clairs ; c’est la limite connue.
Collez le script test/contrast-audit.browser.js du paquet dans la console : il mesure les contrastes du rendu réel, y compris en mode sombre, et signale les textes sous 4,5:1.
Testez aussi avec le réglage du système en mode sombre si vous suivez le système, et sur un vrai appareil.
Vérifiez vos propres images et illustrations : elles ne s’adaptent pas toutes seules.

Bonnes pratiques

À faire

Poser data-bs-theme sur html pour un site entier, ou sur un conteneur pour une zone.
Mémoriser le choix de l’utilisateur et, à défaut, suivre le réglage du système.
Mesurer les contrastes en mode sombre avant de proposer le sélecteur.

À éviter

Proposer le mode sombre sur une page qui utilise des composants .cauri-* sans avoir vérifié leur rendu.
Écrire des couleurs fixes (#fff, #212121) dans vos styles : utilisez les variables --bs-*.
Utiliser color-scheme seul pour simuler un thème sombre.

Accessibilité

Le bouton de bascule a un libellé explicite, par exemple « Activer le mode sombre ».
Le texte reste à 4,5:1 minimum dans les deux modes.
Respectez la préférence système tant que l’utilisateur n’a pas choisi.