Swell

Gestion du thème

Système de thème sombre et clair dans Swell - basculement automatique et manuel avec persistance des préférences utilisateur.

Système de thème adaptatif

Swell intègre un système de thème complet qui permet aux utilisateurs de basculer entre les modes sombre et clair, avec détection automatique des préférences système et persistance locale.

Le système de thème utilise CSS variables et Tailwind CSS pour une transition fluide entre les modes.

Architecture du système

Hook de gestion du thème

useAppearance - Hook principal pour la gestion des thèmes

  • Détection automatique des préférences système
  • Persistance dans le localStorage
  • Synchronisation entre les onglets
  • Transitions fluides entre les modes

Composants d'interface

AppearanceTabs - Bouton de basculement de thème

  • Interface intuitive avec icônes
  • États visuels pour chaque mode
  • Animation de transition
  • Support du mode système

Configuration CSS

Variables de thème

Le système utilise des variables CSS pour définir les couleurs :

globals.css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
}

Fonctionnalités avancées

Détection système

  • Écoute des changements de préférences système
  • Mise à jour automatique en mode 'system'
  • Respect des préférences d'accessibilité

Persistance

  • Sauvegarde dans localStorage
  • Synchronisation entre onglets/fenêtres
  • Restauration au rechargement de page

Performance

  • Chargement optimisé des styles
  • Transitions CSS performantes