Projets/ObsiViewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ObsiViewer/THEMING_STATUS.md

6.8 KiB
Raw Blame History

🎨 É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 :

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 :

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

# 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