Le site dispose déjà d'un toggle (ticket précédent) dans le header pour permettre à l'utilisateur de basculer entre les thèmes clair (light) et sombre (dark). Il reste à implémenter la logique qui gère ce basculement de manière dynamique à l'échelle de l'application. Cette logique doit également permettre de mémoriser la préférence de l'utilisateur pour appliquer le thème choisi lors des futures visites.
Détails fonctionnels
Logique de basculement de thème :
Implémenter la logique pour appliquer dynamiquement le thème clair ou sombre en fonction de l'état du toggle.
Lors de l'activation du toggle pour le mode clair, appliquer la classe correspondante (light-theme) à l'élément racine du document (par exemple, le
ou ).
Lors de l'activation du mode dark, retirer la classe du mode clair et appliquer la classe correspondante au mode dark (dark-theme), ou simplement supprimer la classe light-theme pour revenir au style par défaut.
Stockage de la préférence utilisateur :
Utiliser le localStorage pour mémoriser la préférence de thème de l'utilisateur (clair ou sombre).
Au chargement de la page, vérifier si une préférence de thème est déjà stockée et appliquer le thème approprié automatiquement.
Comportement sur nouvelle visite ou rafraîchissement :
Si une préférence de thème est trouvée dans le localStorage, appliquer automatiquement le thème correspondant dès le chargement de la page.
Si aucune préférence n'est trouvée, appliquer le thème dark par défaut.
Délivrables
[x] Implémentation de la logique JavaScript pour basculer entre le light theme et le dark theme.
[x] Gestion du stockage de la préférence de thème dans le localStorage pour persistance entre les visites.
Critères d'acceptation
[x] Le thème est appliqué dynamiquement en fonction de l'état du toggle, sans nécessiter de rechargement de la page.
[ ] La préférence de thème est correctement mémorisée et restaurée lors des futures visites de l'utilisateur.
[x] Le thème dark est appliqué par défaut si aucune préférence n'est enregistrée.
La préférence du theme clair n'est pas très bien géré quand on arrive sur la page on vois passé du dark au clair il ne faudrait pas que ça se vois et que ca charge directement le theme clair
Contexte
Le site dispose déjà d'un toggle (ticket précédent) dans le header pour permettre à l'utilisateur de basculer entre les thèmes clair (light) et sombre (dark). Il reste à implémenter la logique qui gère ce basculement de manière dynamique à l'échelle de l'application. Cette logique doit également permettre de mémoriser la préférence de l'utilisateur pour appliquer le thème choisi lors des futures visites.
Détails fonctionnels
Logique de basculement de thème :
Implémenter la logique pour appliquer dynamiquement le thème clair ou sombre en fonction de l'état du toggle. Lors de l'activation du toggle pour le mode clair, appliquer la classe correspondante (light-theme) à l'élément racine du document (par exemple, le
ou ). Lors de l'activation du mode dark, retirer la classe du mode clair et appliquer la classe correspondante au mode dark (dark-theme), ou simplement supprimer la classe light-theme pour revenir au style par défaut.Stockage de la préférence utilisateur :
Utiliser le localStorage pour mémoriser la préférence de thème de l'utilisateur (clair ou sombre). Au chargement de la page, vérifier si une préférence de thème est déjà stockée et appliquer le thème approprié automatiquement.
Comportement sur nouvelle visite ou rafraîchissement :
Si une préférence de thème est trouvée dans le localStorage, appliquer automatiquement le thème correspondant dès le chargement de la page. Si aucune préférence n'est trouvée, appliquer le thème dark par défaut.
Délivrables
Critères d'acceptation