# 🎨 État du Système de Théming - ObsiViewer **Date** : 20 octobre 2025 **Statut** : 🟢 Infrastructure complète - Refactoring en cours --- ## ✅ Complété ### 1. Architecture de base (100%) - ✅ **themes.css** : 14 variantes (7 thèmes × 2 modes) avec tokens CSS complets - Light, Dark, Obsidian, Nord, Notion, GitHub, Discord, Monokai - Chaque thème a une version light ET dark - Tokens : backgrounds, text, borders, brand, status, UI, editor, shadows - ✅ **tailwind.config.js** : Configuration complète - Mapping de tous les tokens CSS vers classes Tailwind - 40+ tokens mappés (bg, fg, surface1/2, primary, accent, etc.) - Support des variantes (hover, focus, dark) - ✅ **ThemeService** : Service Angular fonctionnel - Gestion mode (system/light/dark) + thème - Persistance localStorage - Observable pour réactivité - Application sur `` (classe `.dark` + `data-theme`) - ✅ **codemirror-themes.ts** : 14 variantes CodeMirror 6 - Fonction `cm6ThemeFor(themeId, mode)` complète - Chaque thème a sa palette de coloration syntaxique - Cohérence avec les tokens CSS - ✅ **Anti-FOUC** : Script inline dans `index.html` - Lecture des préférences avant Angular - Application immédiate du thème - Pas de flash de contenu non stylé ### 2. Refactoring automatisé (68%) - ✅ **Script `refactor-colors.mjs`** créé - ✅ **66 fichiers** mis à jour automatiquement - ✅ **232 occurrences** de couleurs hardcodées remplacées - `bg-slate-*` → `bg-surface1/2` - `text-gray-*` → `text-main/muted` - `border-slate-*` → `border-border` - Variantes dark:, hover:, focus: gérées ### 3. Documentation - ✅ **THEMING_IMPLEMENTATION.md** : Documentation technique complète - ✅ **THEMING_STATUS.md** : Ce fichier (état du projet) --- ## 🔄 En cours ### Refactoring manuel (109 occurrences restantes) **Fichiers prioritaires** (14+ matches) : 1. `app-sidebar-drawer.component.ts` (14 matches) 2. `graph-options-panel.component.ts` (11 matches) 3. `app-shell-nimbus.component.ts` (9 matches) **Fichiers moyens** (4-8 matches) : - `quick-links.component.ts` (8) - `nimbus-sidebar.component.ts` (8) - `markdown-playground.component.ts` (6) - `add-bookmark-modal.component.html` (6) - `search-query-assistant.component.ts` (5) - `filters-section.component.ts` (4) **Fichiers mineurs** (1-3 matches) : - 23 fichiers avec 1-3 occurrences chacun **Types de cas restants** : - Styles conditionnels complexes - Classes dynamiques avec logique métier - Variantes rares (active:, disabled:, group-hover:) - Couleurs dans des contextes spécifiques (graphes, visualisations) --- ## ⏳ À faire ### 1. Refactoring manuel (Priorité : Haute) **Approche recommandée** : 1. Traiter les 3 fichiers prioritaires (34 matches) 2. Traiter les 7 fichiers moyens (47 matches) 3. Traiter les 23 fichiers mineurs (28 matches) **Commande pour identifier** : ```bash grep -rn "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" src/ | wc -l ``` ### 2. Tests de la matrice complète (Priorité : Haute) **14 combinaisons à tester** : | Thème | Light | Dark | |-----------|-------|------| | Light | ✅ | N/A | | Dark | N/A | ✅ | | Obsidian | ⏳ | ⏳ | | Nord | ⏳ | ⏳ | | Notion | ⏳ | ⏳ | | GitHub | ⏳ | ⏳ | | Discord | ⏳ | ⏳ | | Monokai | ⏳ | ⏳ | **Checklist par combinaison** : - [ ] Sidebar (fond, hover, actif, badges) - [ ] Topbar + search (input, focus, placeholder) - [ ] Liste notes (items, hover, selected) - [ ] Page détail (titres, liens, code, tables) - [ ] Mode édition (inputs, buttons, CodeMirror) - [ ] Panneaux (TOC, propriétés, tags) - [ ] Modales (fond, overlay, bordure) - [ ] Menus contextuels - [ ] Toasts - [ ] Tables (headers, zebra, hover) - [ ] Chips/Tags (fond, hover, selected) - [ ] Scrollbars - [ ] Page Parameters - [ ] Mobile (bottom nav, drawers) ### 3. Validation contrastes (Priorité : Moyenne) **Outils** : - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Chrome DevTools (Lighthouse) **Critères WCAG AA** : - Texte normal : ratio ≥ 4.5:1 - Texte large : ratio ≥ 3:1 - Éléments UI : ratio ≥ 3:1 **À vérifier pour chaque thème** : - [ ] Texte principal / fond - [ ] Texte muted / fond - [ ] Liens / fond - [ ] Boutons / fond - [ ] Bordures / fond ### 4. Vérification finale (Priorité : Basse) - [ ] Aucune couleur hardcodée restante (grep complet) - [ ] Tous les composants utilisent les tokens - [ ] Documentation à jour - [ ] Screenshots comparatifs (avant/après) - [ ] Guide utilisateur pour la page Parameters --- ## 📊 Métriques ### Progression globale ``` Infrastructure : ████████████████████ 100% (5/5) Refactoring : █████████████░░░░░░░ 68% (232/341) Tests : ░░░░░░░░░░░░░░░░░░░░ 0% (0/14) Documentation : ████████████████████ 100% (2/2) --- TOTAL : ████████████░░░░░░░░ 67% ``` ### Détails refactoring | Catégorie | Avant | Après | Restant | |--------------------|-------|-------|---------| | Couleurs hardcodées| 341 | 109 | 109 | | Fichiers touchés | 0 | 66 | ~32 | | Tokens créés | 0 | 40+ | - | | Thèmes complets | 2 | 14 | - | --- ## 🚀 Commandes rapides ```bash # Refactoring automatique (réexécuter si besoin) node scripts/refactor-colors.mjs # Rechercher couleurs hardcodées grep -rn "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" src/ # Lancer l'application npm run dev # Tests E2E npm run test:e2e # Build production npm run build ``` --- ## 🎯 Objectif final **Application entièrement thémable** : - ✅ 7 thèmes × 2 modes = 14 combinaisons - ✅ Aucune couleur hardcodée - ✅ Cohérence visuelle totale - ✅ Accessibilité WCAG AA - ✅ Performance optimale (CSS variables) - ✅ Expérience utilisateur fluide (anti-FOUC) --- ## 📝 Notes ### Points d'attention 1. **CodeMirror 6** : Les thèmes sont appliqués dynamiquement via `ThemeService.getCodeMirrorExtensions()` 2. **Persistance** : Clé localStorage `obsiviewer.preferences.v1` 3. **Réactivité** : Tous les composants doivent s'abonner à `ThemeService.onPrefs$` si nécessaire 4. **Mobile** : Vérifier les overlays et bottom sheets dans chaque thème 5. **Graphes** : Les visualisations D3/Canvas peuvent nécessiter un traitement spécial ### Améliorations futures - [ ] Thème personnalisé (éditeur de couleurs) - [ ] Import/export de thèmes - [ ] Prévisualisation live dans Parameters - [ ] Thèmes communautaires - [ ] Mode haute contraste dédié --- **Dernière mise à jour** : 20 octobre 2025, 17:05 UTC-04:00