feat: refactor theme management and enhance color customization

- Cleaned up theme architecture by consolidating CSS variables and removing redundant theme applications, ensuring a single source of truth for theming.
- Implemented a dark mode override and improved color management using CSS variables for better customization.
- Updated various components to utilize new color variables, enhancing maintainability and visual consistency across the application.
- Added detailed tasks in TODO.md for future enhancements related to user preferences and color customization features.

TODO.md

@@ -1,9 +1,40 @@
 # TowerControl v2.0 - Gestionnaire de tâches moderne
 
 ## Idées à developper
+- [x] Refacto et intégration design : mode sombre et clair sont souvent mal généré par défaut <!-- Diagnostic terminé -->
 - [ ] Personnalisation : couleurs
 - [ ] Optimisations Perf : requetes DB
-- [ ] PWA et mode offline
+- [ ] PWA et mode offline
+
+---
+
+## 🎨 **REFACTORING THÈME & PERSONNALISATION COULEURS**
+
+### **Phase 1: Nettoyage Architecture Thème**
+- [x] **Décider de la stratégie** : CSS Variables vs Tailwind Dark Mode vs Hybride <!-- CSS Variables choisi -->
+- [x] **Configurer tailwind.config.js** avec `darkMode: 'class'` si nécessaire <!-- Annulé : CSS Variables pur -->
+- [x] **Supprimer la double application** du thème (layout.tsx + ThemeContext + UserPreferencesContext) <!-- ThemeContext est maintenant la source unique -->
+- [x] **Refactorer les CSS variables** : `:root` pour défaut, `.dark/.light` pour override <!-- Architecture CSS propre avec :root neutre -->
+- [x] **Nettoyer les composants** : supprimer classes `dark:` hardcodées, utiliser uniquement CSS variables <!-- TERMINÉ : toutes les occurrences supprimées -->
+- [ ] **Corriger les problèmes d'hydration** mismatch et flashs de thème
+- [ ] **Créer un système de design cohérent** avec tokens de couleur
+
+### **Phase 2: Système Couleurs Personnalisées**
+- [ ] **Étendre le modèle UserPreferences** pour supporter des couleurs personnalisées
+- [ ] **Créer un service de gestion** des couleurs personnalisées
+- [ ] **Créer une interface de configuration** des couleurs personnalisées
+- [ ] **Implémenter le système CSS** pour les couleurs personnalisées dynamiques
+- [ ] **Créer un système de presets** de thèmes (Tech Dark, Corporate Light, etc.)
+- [ ] **Ajouter la validation des contrastes** pour les couleurs personnalisées
+- [ ] **Permettre export/import** des configurations de thème personnalisées
+
+### **Problèmes identifiés actuellement :**
+- ❌ Approche hybride incohérente (CSS Variables + Tailwind `dark:` + classes conditionnelles)
+- ❌ Double application du thème (3 endroits différents)
+- ❌ Pas de configuration Tailwind pour `darkMode`
+- ❌ Hydration mismatch avec flashs
+- ❌ CSS Variables mal optimisées (`:root` contient le thème sombre)
+- ❌ Couleurs hardcodées dans certains composants
 
 ---