Placez ThemeToggle dans la barre de navigation ou en haut à droite de la page (coin haut‑droit recommandé). Les utilisateurs s’attendent à trouver le contrôle de thème près des autres actions globales (profil, langue, notifications).

Assurez-vous que le bouton a un titre/tooltip clair (ex. « Activer le mode sombre » / « Activer le mode clair ») et une étiquette pour les lecteurs d’écran. Le contraste visuel du bouton doit rester lisible dans les deux thèmes.

Cliquez sur le contrôle pour basculer entre mode clair et sombre. Observez la commutation des éléments visibles (background, texte, icônes et éventuels logos alternatifs). Confirmez que l’effet est immédiat sans rechargement de page.

Vérifiez les composants globaux (topbar, logos, images alternatives, arrière‑plans) : certains éléments doivent changer d’apparence selon le thème. Si vous avez un logo sombre/claire, validez qu’il s’affiche correctement selon le thème.

Naviguez entre plusieurs pages de l’application pour vérifier que le thème reste appliqué lors des changements de route dans la SPA.

Le helper fournit l’état courant (ex. indicateur ‘isDark’), une action pour définir explicitement le thème, et une action pour basculer. Ces actions affectent immédiatement l’apparence de l’application et enregistrent la préférence côté client.

Au premier affichage d’un utilisateur, le helper lit la préférence stockée côté client et applique le thème correspondant. Le comportement par défaut est souvent le mode sombre si aucune préférence n’est trouvée.

Si vous avez besoin d’un bouton ou d’une option dédiée (par ex. “Mode clair” / “Mode sombre”), utilisez l’action de définition explicite du helper pour appliquer et persister la préférence.

Après un changement, fermez l’onglet ou rafraîchissez la page pour vérifier que la préférence est restaurée automatiquement. Si elle l’est, la persistance côté client fonctionne correctement.

Tester : 1) ouvrir en navigation privée (certains navigateurs empêchent la persistance), 2) vider le stockage du navigateur et revérifier la valeur par défaut, 3) simuler conflit (préférence ancienne vs nouvelle) et observer comportement.

Placez le contrôle de langue (LanguageSelector) dans la topbar, à proximité du ThemeToggle et de l’accès au compte. L’emplacement cohérent aide l’utilisateur à le trouver rapidement.

Lorsqu’un utilisateur sélectionne une langue, le helper met à jour l’état de langue actif, applique immédiatement les traductions disponibles et sauvegarde la préférence côté client.

Vérifiez que tous les libellés d’interface (menus, boutons, messages) changent comme attendu. Sur les pages longues, parcourir le contenu permet de confirmer que la plupart des éléments sont traduits.

Si une chaîne n’est pas disponible dans la langue choisie, validez que l’interface utilise une langue de repli (souvent anglais ou la langue commune) pour éviter des zones vides.

Vérifiez que la langue est restaurée automatiquement après fermeture/rouverture du navigateur — la sélection doit être lue depuis la persistance côté client.

Confirmez quelles clés sont utilisées pour stocker le thème et la langue dans le navigateur (par ex. “preferred-theme”, “preferred-language”). Cela permet de faire des vérifications manuelles lors des tests.

Changez thème/langue via l’UI, puis ouvrez les outils du navigateur pour vérifier la présence des valeurs correspondantes. Fermez l’onglet et rouvrez l’app : la préférence doit être restaurée.

Comprendre les limites : navigation privée restreint parfois la persistance; certains bloqueurs ou politiques de sécurité peuvent interdire l’accès au stockage ; un nettoyage manuel du navigateur efface les préférences.

Ajoutez dans les paramètres utilisateur un bouton “Réinitialiser préférences” permettant de supprimer les valeurs sauvegardées et de revenir aux valeurs par défaut.

Si le changement ne persiste pas (ex. navigation privée), affichez une notification explicative pour l’utilisateur (ex. “La sauvegarde des préférences est limitée en navigation privée”).

Comportement attendu : la préférence stockée côté client est lue et appliquée automatiquement à chaque ouverture. Aucun traitement spécial n’est nécessaire.

Tester : ouvrir plusieurs onglets, changer la préférence dans un onglet. Assurez-vous que les autres onglets détectent le changement (si votre application écoute les événements de stockage) ou qu’un rafraîchissement applique la nouvelle valeur.

Sans synchronisation via compte, la préférence ne suit pas l’utilisateur entre appareils. Proposez une option d’export / import manuel (fichier JSON à copier/coller) si nécessaire pour certains publics.

Si votre application offre une synchronisation liée au compte utilisateur, enregistrez les préférences sur le profil (optionnel) pour les restaurer sur d’autres appareils après connexion. Donnez à l’utilisateur la possibilité de choisir entre “préférence du compte” et “préférence locale”.

Quand une préférence locale et une préférence synchronisée diffèrent, choisissez une stratégie claire : priorité au compte (serveur) ou priorité à la locale la plus récente. Affichez un message informatif si vous appliquez un remplacement automatique.

Préparez votre format de préférence à évoluer (ex. ajouter un thème personnalisé). Lors d’une migration, détectez l’ancienne version et effectuez une mise à jour sûre plutôt que de supprimer la préférence sans prévenir.