Skip to main content

Mode sombre

Dark-by-default, sans toggle​

Patrimo est exclusivement en dark mode. Il n'existe pas de thème clair, pas de toggle light/dark, pas de prefers-color-scheme: light à supporter dans l'app elle-même.

Ce choix est volontaire :

  1. Sessions longues : un fond noir OLED réduit la fatigue oculaire en consultation patrimoniale quotidienne
  2. OLED friendly : les pixels noirs sont éteints sur OLED → consommation réduite sur mobile/laptops récents
  3. Couleurs financières : vert et rouge sont plus lisibles sur fond noir que sur fond clair (moins de scintillement)
  4. Simplicité : zéro surface de bug liée à la permutation des palettes
Et la documentation ?

Docusaurus supporte les deux thèmes, et la doc laisse le toggle accessible en haut à droite. La palette custom est alignée sur les tokens Patrimo en mode sombre ; le mode clair de Docusaurus n'est pas stylisé spécifiquement.

Fond en trois niveaux​

TokenUsageValeur
--color-bgBody, pages auth#050506
--color-baseSidebar, zones fixes#0a0a0c
--color-elevatedCartes .card#111116

Plus la surface est « flottante » (modale, carte), plus elle monte d'un cran. Le glassmorphism (--color-surface) ajoute une surcouche translucide par-dessus.

Glassmorphism​

Sur fond OLED, un blur de 16 px avec 5 % de blanc suffit à créer de la profondeur sans voile gris. La classe .glass-card encapsule :

background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
Compatibilité Safari

Toujours préfixer avec -webkit-backdrop-filter — Safari <15 sinon désactive l'effet silencieusement.

Accents colorés​

Sur fond noir, les accents saturés (ambre, vert, rouge) ressortent fortement. Règles :

  • Ne pas abuser : 1 seul accent principal par écran (l'ambre pour les CTA)
  • Réserver le vert / rouge aux variations financières — jamais pour des états UI génériques (« succès », « erreur » d'un formulaire = --color-accent ou neutre)
  • Utiliser les tokens -muted pour les fonds : --color-accent-muted (opacité 12 %), --color-positive-muted, etc.

Si un jour un thème clair devient nécessaire​

Prérequis avant implémentation :

  1. ADR justifiant le besoin (ex. partage externe, impression)
  2. Audit de chaque composant utilisant des valeurs RGB inline (AccountCard, KpiCard highlight, login button) → factoriser en tokens
  3. Ajout d'un data-theme="light" scope dans :root avec la palette équivalente
  4. Toggle persisté en localStorage

Aucun de ces prérequis n'est en place actuellement.

Voir aussi​