Test 7 - Mode sombre
Verifie le systeme de mode sombre utilise dans MonJournalMigraine. Toggle manuel, persistance en localStorage, et detection de preferences systeme.
Objectifs
- Implanter un toggle de mode sombre simple.
- Persister le choix utilisateur en localStorage.
- Charger la preference au demarrage.
- Detector les preferences systeme (prefers-color-scheme).
- Animer la transition entre themes.
Etat du theme
Theme actuel
-
Preference systeme
-
localStorage
-
Class sur <html>
-
Controles
Apercu des couleurs
Primaire
Fond secondaire
Texte normal
Informations stockage
localStorage (mjm-dark-mode)
Stocke la preference utilisateur en tant que string 'true' ou 'false'.
Stocke la preference utilisateur en tant que string 'true' ou 'false'.
Classe HTML
Ajoute la classe
Ajoute la classe
dark a l'element <html> quand le mode sombre est actif.
CSS Variables
Les couleurs sont definies en CSS custom properties dans :root et html.dark.
Les couleurs sont definies en CSS custom properties dans :root et html.dark.
Test de persistance
- Basculez le mode sombre avec le bouton "Basculer".
- Rafraichissez la page (F5) - le theme doit etre restaure.
- Ouvrez ce test dans un nouvel onglet - meme theme partage.
- Effacez localStorage - le theme revient aux preferences systeme.