serv_benchmark/docs/FEATURE_THEME_SYSTEM.md

Système de Thèmes - Linux BenchTools

Vue d'ensemble

Le système de thèmes permet aux utilisateurs de personnaliser l'apparence de l'interface avec différents jeux de couleurs. Les thèmes sont stockés dans des fichiers CSS séparés et peuvent être changés dynamiquement sans rechargement de page.

Thèmes disponibles

1. Monokai Dark (par défaut)

• Fichier: frontend/css/themes/monokai-dark.css
• Description: Thème sombre avec la palette de couleurs Monokai classique
• Arrière-plan: #1e1e1e
• Couleur primaire: #a6e22e (vert)
• Utilisation: Idéal pour une utilisation prolongée, réduit la fatigue oculaire

2. Monokai Light

• Fichier: frontend/css/themes/monokai-light.css
• Description: Variante claire du thème Monokai
• Arrière-plan: #f9f9f9
• Couleur primaire: #7cb82f (vert)
• Utilisation: Pour les environnements bien éclairés

3. Gruvbox Dark

• Fichier: frontend/css/themes/gruvbox-dark.css
• Description: Thème sombre avec la palette Gruvbox
• Arrière-plan: #282828
• Couleur primaire: #b8bb26 (vert)
• Utilisation: Palette chaleureuse et rétro, populaire dans la communauté des développeurs

4. Gruvbox Light

• Fichier: frontend/css/themes/gruvbox-light.css
• Description: Variante claire du thème Gruvbox
• Arrière-plan: #fbf1c7
• Couleur primaire: #98971a (vert)
• Utilisation: Palette chaleureuse pour environnements lumineux

Architecture

Structure des fichiers

frontend/
├── css/
│   ├── main.css              # Styles de base (spacing, layout, etc.)
│   ├── components.css        # Composants réutilisables
│   └── themes/               # Thèmes (variables CSS uniquement)
│       ├── monokai-dark.css
│       ├── monokai-light.css
│       ├── gruvbox-dark.css
│       └── gruvbox-light.css
└── js/
    └── theme-manager.js      # Gestionnaire de thèmes

Variables CSS communes

Tous les thèmes définissent les mêmes variables CSS pour assurer la compatibilité :

:root {
  /* Couleurs de fond */
  --bg-primary
  --bg-secondary
  --bg-tertiary
  --bg-hover

  /* Couleurs de texte */
  --text-primary
  --text-secondary
  --text-muted

  /* Couleurs d'accent */
  --color-red
  --color-orange
  --color-yellow
  --color-green
  --color-cyan
  --color-blue
  --color-purple

  /* Couleurs sémantiques */
  --color-success
  --color-warning
  --color-danger
  --color-info
  --color-primary

  /* Bordures */
  --border-color
  --border-highlight

  /* Ombres */
  --shadow-sm
  --shadow-md
  --shadow-lg
}

Gestionnaire de thèmes (theme-manager.js)

API

ThemeManager.getCurrentTheme()

Retourne l'identifiant du thème actuellement actif.

const theme = ThemeManager.getCurrentTheme(); // 'monokai-dark'

ThemeManager.applyTheme(theme)

Applique un thème et sauvegarde la préférence.

ThemeManager.applyTheme('gruvbox-dark');

ThemeManager.loadTheme(theme)

Charge un thème sans sauvegarder la préférence.

ThemeManager.loadTheme('monokai-light');

ThemeManager.themes

Objet contenant la configuration de tous les thèmes disponibles.

{
  'monokai-dark': {
    name: 'Monokai Dark',
    file: 'css/themes/monokai-dark.css'
  },
  // ...
}

Événement personnalisé

Le gestionnaire de thèmes émet un événement themeChanged lors du changement de thème :

window.addEventListener('themeChanged', (event) => {
  console.log('Nouveau thème:', event.detail.theme);
  console.log('Nom du thème:', event.detail.themeName);
});

Stockage

Le thème sélectionné est stocké dans localStorage avec la clé benchtools_theme.

// Lecture
const theme = localStorage.getItem('benchtools_theme');

// Écriture (ne pas faire manuellement, utiliser ThemeManager.applyTheme)
localStorage.setItem('benchtools_theme', 'gruvbox-dark');

Intégration dans les pages

Chaque page HTML doit inclure le gestionnaire de thèmes avant les autres scripts :

<!-- Scripts -->
<script src="js/theme-manager.js"></script>
<script src="config.js"></script>
<script src="js/utils.js"></script>
<!-- ... autres scripts -->

Le thème est automatiquement chargé au démarrage de la page.

Page de configuration

La page settings.html contient un sélecteur de thème :

<select id="themeStyle" class="form-control">
  <option value="monokai-dark" selected>Monokai Dark (par défaut)</option>
  <option value="monokai-light">Monokai Light</option>
  <option value="gruvbox-dark">Gruvbox Dark</option>
  <option value="gruvbox-light">Gruvbox Light</option>
</select>

La fonction saveThemePreference() dans settings.js gère la sauvegarde et l'application du thème.

Ajout d'un nouveau thème

Pour ajouter un nouveau thème :

1. Créer le fichier CSS dans frontend/css/themes/mon-theme.css

   :root {
     --bg-primary: #...;
     --bg-secondary: #...;
     /* ... toutes les variables requises ... */
   }
   

2. Déclarer le thème dans theme-manager.js

   const THEMES = {
     // ... thèmes existants
     'mon-theme': {
       name: 'Mon Nouveau Thème',
       file: 'css/themes/mon-theme.css'
     }
   };
   

3. Ajouter l'option dans settings.html

   <option value="mon-theme">Mon Nouveau Thème</option>
   

Tests

Pour tester le système de thèmes :

1. Ouvrir settings.html
2. Sélectionner un thème dans la liste déroulante
3. Cliquer sur "Appliquer le thème"
4. Vérifier que le thème est appliqué immédiatement
5. Naviguer vers d'autres pages pour vérifier la persistance

Avantages de cette architecture

• Modularité : Chaque thème est dans un fichier séparé
• Performance : Un seul fichier CSS de thème chargé à la fois
• Extensibilité : Facile d'ajouter de nouveaux thèmes
• Cohérence : Variables CSS standardisées
• Persistance : Le choix de l'utilisateur est sauvegardé
• Sans rechargement : Changement instantané de thème

Compatibilité

• Fonctionne avec tous les navigateurs modernes supportant les variables CSS
• Fallback automatique vers Monokai Dark si le thème n'est pas trouvé
• Compatible avec le système d'unités d'affichage existant