234 lines
6.8 KiB
Markdown
234 lines
6.8 KiB
Markdown
# 🎨 É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 `<html>` (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
|