Le mode sombre n'est pas une fonctionnalité qu'on boulonne à la fin. Il touche chaque composant, chaque couleur de fond, chaque bordure, chaque nuance de texte, chaque champ de saisie. Quand nous avons implémenté le mode sombre pour le tableau de bord de 0fee.dev lors de la Session 078, cela signifiait mettre à jour 19 pages, 6 composants partagés et 7 pages d'authentification/paiement -- un balayage systématique qui a ajouté des centaines de classes utilitaires dark: suivant des patterns cohérents.
L'approche systématique
Chaque page a été mise à jour avec les mêmes patterns TailwindCSS :
- Fonds :
bg-white dark:bg-gray-900pour les pages,bg-gray-50 dark:bg-gray-800pour les cartes. - Texte :
text-gray-900 dark:text-whitepour les titres,text-gray-600 dark:text-gray-400pour le texte secondaire. - Bordures :
border-gray-200 dark:border-gray-700. - Inputs :
bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600.
Exclusions intentionnelles
Certains éléments ont été intentionnellement exclus du mode sombre : les badges de statut (qui gardent leurs couleurs pour la lisibilité), les graphiques (qui ont leur propre palette) et les blocs de code (qui utilisent un thème sombre en permanence).
Cet article fait partie de la série « Comment nous avons construit 0fee.dev ». 0fee.dev est un orchestrateur de paiement couvrant 53+ fournisseurs dans 200+ pays, construit par Juste A. GNIMAVO et Claude depuis Abidjan sans aucun ingénieur humain. Suivez la série pour l'histoire complète de la construction.