yoann90 / Todo

0 stars 0 forks source link

Implémentation de la logique du Dark/Light theme #40

Closed GohanJesse closed 2 months ago

GohanJesse commented 2 months ago

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

Softexus commented 2 months ago

Point à revoir

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