Projet 4 — Thème sur-mesure (Niv. ⭐⭐⭐⭐)

⏱️ TL;DR — Transformer le look « Bootstrap d’usine » en une identité propre, via Sass : palette de marque, typographie, rayons, une couleur de thème custom, un dark mode assorti. Objectif : maîtriser la personnalisation Sass de bout en bout.

🎯 Cahier des charges

1. Build Sass personnalisé (npm + sass) avec l’ordre d’import correct.
2. Palette : redéfinir $primary, $success, $danger, ajouter une couleur brand à $theme-colors.
3. Typographie : $font-family-base (une Google Font), $headings-font-weight.
4. Formes : $border-radius, options $enable-shadows/$enable-gradients.
5. Dark mode : surcharger quelques variables -dark pour un sombre à votre marque.
6. Build minimal : n’importer que les modules utilisés.

🔍 Endroits à visiter

Jalons

• btn-primary a votre couleur de marque, partout, sans surcharge CSS.
• btn-brand (nouvelle couleur) existe et fonctionne.
• La typographie et les rayons reflètent votre identité.
• Le dark mode est cohérent avec la marque.
• Le CSS final ne contient que les modules utilisés.

@import "bootstrap/scss/functions";
 
// 1) Couleurs & options
$primary: #7952b3;
$border-radius: .6rem;
$font-family-base: "Inter", system-ui, sans-serif;
$enable-shadows: true;
 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
 
// 2) Couleur de thème custom
$theme-colors: map-merge($theme-colors, ("brand": #ff6b6b));
 
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
 
// 3) Modules utilisés seulement
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";

Pour aller plus loin

• Exposez un sélecteur de couleur d’accent piloté par --bs-primary en JS (8.5).
• Documentez votre thème comme un mini design system.

Projet suivant : Projet 5 — App Next.js