La Gestion des Thèmes de Couleurs¶

Contexte¶

Analyse du système de thèmes de couleurs dans le projet PsychoEnLigneV2 pour comprendre l'architecture frontend et les possibilités de personnalisation.

Contenu¶

Structure du Système¶

Le système de thèmes est situé dans : - FrontEnd/shared-kernel/theme/ThemeProvider.tsx - Gestionnaire de thèmes - FrontEnd/shared-kernel/theme/themes.ts - Définitions des thèmes - FrontEnd/shared-kernel/styles/globals.css - Styles globaux - FrontEnd/tailwind.config.js - Configuration Tailwind

Thèmes Disponibles¶

Le projet propose 6 thèmes prédéfinis :

Indigo (thème par défaut)
Émeraude (vert)
Rose (rose)
Ambre (orange)
Violet (violet)
Ardoise (bleu foncé/sombre - mode sombre)

Structure des Couleurs¶

Chaque thème définit un ensemble cohérent de couleurs : - Primary : Couleur principale (avec variantes hover, light, dark, text, muted) - Accent : Couleur d'accentuation - Surface : Couleurs de fond (surface, raised, overlay) - Content : Couleurs de texte (normal, muted, subtle, inverted) - Border : Couleurs de bordure - États : Success (vert), Warning (jaune), Danger (rouge) - Sidebar : Couleurs spécifiques à la barre latérale

Exemples de Palettes¶

Thème Indigo (défaut) :¶

primary: '79 70 229' (indigo moyen)
primaryHover: '67 56 202' (indigo foncé)
success: '16 185 129' (vert)
warning: '245 158 11' (orange)
danger: '239 68 68' (rouge)

Thème Ardoise (mode sombre) :¶

surface: '30 41 59' (gris foncé)
surfaceRaised: '15 23 42' (noir/gris très foncé)
content: '248 250 252' (blanc cassé)

Fonctionnement Technique¶

Les couleurs sont définies en RGB séparé par des espaces (ex: '79 70 229')
Elles sont appliquées via CSS custom properties : --color-primary, --color-content, etc.
Le système supporte le stockage local pour mémoriser le thème choisi
Utilisation de Tailwind CSS avec des classes personnalisées

Utilisation dans le Code¶

Les couleurs sont accessibles via : - Classes Tailwind : bg-primary, text-content, border-border - CSS custom properties : rgb(var(--color-primary)) - Hook React : useTheme() pour changer de thème dynamiquement

Décision / Conclusion¶

Le système de thèmes de PsychoEnLigneV2 est bien structuré avec 6 thèmes prédéfinis. Il utilise une approche moderne basée sur CSS custom properties et Tailwind CSS, permettant une personnalisation facile et un stockage local des préférences utilisateur.

À faire¶

Documenter les composants UI qui utilisent ces thèmes
Explorer les templates d'emails pour harmoniser les couleurs
Considérer l'ajout de thèmes personnalisés si nécessaire