Mode clair : un toggle dans la sidebar pour passer Helpho en thème clair

Plusieurs photographes nous ont remonté ces dernières semaines que travailler dans Helpho en pleine journée, écran dehors ou en bord de fenêtre, fatiguait les yeux à force. Le mode sombre est une signature visuelle qu'on aime — il fait sens pour un outil photo où on regarde des images sur fond neutre — mais imposer un seul thème à tout le monde, c'est ignorer une moitié des situations d'usage. On ajoute donc une alternative claire.

Un toggle simple, accessible partout

Tu trouves le bouton à deux endroits cohérents :

• Dans l'app authentifiée : sidebar, juste à côté de ton bouton « Mon profil »
• Sur le site marketing (helpho.io, /tarifs, /fonctionnalites, /blog, etc.) : header en haut à droite, juste avant les CTA « Se connecter » / « Essai gratuit »

Une icône ☀️ quand tu es en sombre (clic pour passer en clair), une icône 🌙 quand tu es en clair (clic pour repasser en sombre). Un clic, l'app et le site basculent instantanément. Pas de modal, pas de paramètre caché, pas de rechargement de page. Et ton choix est mémorisé d'une page à l'autre, du marketing à l'app : tu testes en clair sur la landing, tu crées ton compte, tu arrives directement en clair dans le produit.

Une palette calibrée, pas juste un `invert()`

Faire un mode clair propre n'est pas juste inverser les couleurs. Chaque token a été repensé pour le contexte clair :

• Fond principal : crème doux `#FAFAF7` plutôt que blanc pur — moins agressif sur les longues sessions
• Surfaces élevées (cards, modals) : blanc pur avec une ombre subtile au lieu du `bg-white/[0.04]` du dark
• Texte principal : zinc 900 `#1A1A1E` (pas du noir pur, plus doux)
• Texte secondaire : zinc 600 / 500 pour la hiérarchie
• Bordures : rgba(0,0,0, 0.08) — discrètes mais visibles
• Accents coral : identiques au sombre (#F47B6B) — c'est l'ADN visuel Helpho qui ne bouge pas selon le thème

Persistance et anti-flash

Ton choix est retenu dans `localStorage` sur chaque appareil. Donc si tu préfères Helpho en clair sur ton iMac de bureau mais en sombre sur ton MacBook quand tu shootes le soir, c'est ce que tu auras à chaque connexion.

Et le flash : au refresh, on ne veut pas voir le sombre apparaître une demie-seconde avant que le clair s'applique. On a donc un petit script JS qui s'exécute synchroniquement dans le `` avant le rendu React, lit la pref et applique la classe au ``. Résultat : zéro flash, le thème est correct dès le premier pixel rendu.

Mode sombre par défaut

Important : le mode sombre reste le défaut pour tout le monde, y compris les utilisateurs existants. La bascule est purement opt-in — tu cliques, tu obtiens le clair. Tu ne cliques rien, tu gardes le sombre. Pas d'auto-bascule selon ta préférence OS, pas de surprise.

Coulisses techniques pour ceux qui aiment

Le mécanisme est posé sur une palette sémantique CSS centralisée : un seul fichier (`globals.css`) définit tous les tokens (`--bg-base`, `--text-primary`, `--surface`, `--border`, etc.) en valeurs dark, puis un bloc `html.light { ... }` remap ces mêmes tokens vers leurs équivalents clairs.

Pour faire basculer les ~7000 occurrences de classes Tailwind `bg-white/[X]` et `text-slate-N` dans le code sans toucher à chaque composant, on s'appuie sur le remap des variables Tailwind elles-mêmes : `html.light { --color-white: #1A1A1E; --color-slate-100: #1F1F23; ... }`. Toutes les classes Tailwind qui consomment ces variables basculent automatiquement.

Côté Tailwind v4 + `@custom-variant dark`, on fait un toggle exclusif des classes : passer en clair retire `dark` et ajoute `light` (et l'inverse). Sans ça, garder `dark` à côté de `light` aurait laissé les modificateurs `dark:bg-X` actifs et créé des incohérences visuelles.

Et la suite ?

Le mode clair est shipped sur toute la plateforme : pages marketing publiques (helpho.io, /tarifs, /fonctionnalites, /blog, /outils…) et app authentifiée. Les illustrations de produit dans les pages marketing (mockup hero du dashboard, previews de chaque fonctionnalité) basculent aussi pour rester cohérentes avec le thème que tu choisis.

Si tu testes le clair et que tu repères un écran qui rend mal (un contraste insuffisant, un accent qui ne se voit plus, une ombre invisible), écris-moi — chaque retour permet de raffiner les ajustements de polish.

Pour activer : icône ☀️ dans le header (site) ou dans la sidebar (app), à côté de ton avatar. C'est tout.