serv_benchmark/docs/GUIDE_THEMES.md

🎨 Guide d'utilisation des thèmes

Ce guide vous explique comment utiliser et personnaliser les thèmes de Linux BenchTools.

📖 Table des matières

1. Changer de thème
2. Thèmes disponibles
3. Aperçu des thèmes
4. Créer un nouveau thème
5. Dépannage

---

Changer de thème

Méthode 1 : Via l'interface Settings

1. Ouvrez la page Settings : http://localhost:8087/settings.html
2. Dans la section "Thème d'interface", sélectionnez le thème de votre choix
3. Cliquez sur "Appliquer le thème"
4. Le thème est appliqué immédiatement sur toutes les pages

Méthode 2 : Via la page de prévisualisation

1. Ouvrez la page Theme Preview : http://localhost:8087/theme-preview.html
2. Cliquez directement sur le thème que vous souhaitez appliquer
3. Le thème est appliqué instantanément

Méthode 3 : Via JavaScript (pour développeurs)

// Appliquer un thème
window.ThemeManager.applyTheme('gruvbox-dark');

// Obtenir le thème actuel
const currentTheme = window.ThemeManager.getCurrentTheme();
console.log(currentTheme); // 'monokai-dark'

// Écouter les changements de thème
window.addEventListener('themeChanged', (event) => {
  console.log('Nouveau thème:', event.detail.theme);
  console.log('Nom:', event.detail.themeName);
});

---

Thèmes disponibles

🌙 Monokai Dark (par défaut)

• Couleur principale : Vert #a6e22e
• Fond : Noir #1e1e1e
• Idéal pour : Utilisation prolongée, environnements faiblement éclairés
• Inspiration : Thème Monokai classique des éditeurs de code

Palette de couleurs :

• Vert : #a6e22e
• Cyan : #66d9ef
• Orange : #fd971f
• Rouge : #f92672
• Violet : #ae81ff
• Jaune : #e6db74

☀️ Monokai Light

• Couleur principale : Vert #7cb82f
• Fond : Blanc cassé #f9f9f9
• Idéal pour : Environnements bien éclairés, bureaux lumineux
• Inspiration : Adaptation claire du thème Monokai

Palette de couleurs :

• Vert : #7cb82f
• Cyan : #0099cc
• Orange : #d87b18
• Rouge : #d81857
• Violet : #8b5fd8
• Jaune : #b8a900

🌙 Gruvbox Dark

• Couleur principale : Vert #b8bb26
• Fond : Brun foncé #282828
• Idéal pour : Ambiance chaleureuse et rétro
• Inspiration : Thème Gruvbox populaire dans la communauté Linux

Palette de couleurs :

• Vert : #b8bb26
• Bleu : #83a598
• Orange : #fe8019
• Rouge : #fb4934
• Violet : #d3869b
• Jaune : #fabd2f

☀️ Gruvbox Light

• Couleur principale : Vert #98971a
• Fond : Crème #fbf1c7
• Idéal pour : Environnements lumineux avec ambiance chaleureuse
• Inspiration : Version claire du thème Gruvbox

Palette de couleurs :

• Vert : #98971a
• Bleu : #458588
• Orange : #d65d0e
• Rouge : #cc241d
• Violet : #b16286
• Jaune : #d79921

🌓 Mix Monokai-Gruvbox

• Couleur principale : Vert #b8bb26 (Gruvbox)
• Fond : Noir #1e1e1e (Monokai)
• Idéal pour : Le meilleur des deux mondes - fond sombre Monokai + couleurs chaleureuses Gruvbox
• Inspiration : Thème hybride combinant Monokai et Gruvbox

Caractéristiques :

• Arrière-plans : Monokai (noir profond)
• Couleurs d'accent : Gruvbox (palette chaleureuse)
• Texte : Gruvbox (beige/crème)
• Parfait pour ceux qui aiment le contraste de Monokai avec la chaleur de Gruvbox

Palette de couleurs :

• Vert : #b8bb26
• Bleu : #83a598
• Orange : #fe8019
• Rouge : #fb4934
• Violet : #d3869b
• Jaune : #fabd2f

---

Aperçu des thèmes

Pour voir un aperçu visuel de tous les thèmes avec des composants réels, visitez :

http://localhost:8087/theme-preview.html

Cette page vous permet de :

• Voir la palette de couleurs de chaque thème
• Tester les composants (boutons, badges, formulaires)
• Changer de thème en un clic
• Comparer visuellement les différents thèmes

---

Créer un nouveau thème

Étape 1 : Créer le fichier CSS

Créez un nouveau fichier dans frontend/css/themes/, par exemple mon-theme.css :

/**
 * Mon Nouveau Thème
 * Description de votre thème
 */

: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: 0 2px 4px rgba(...);
  --shadow-md: 0 4px 12px rgba(...);
  --shadow-lg: 0 8px 24px rgba(...);
}

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

Ouvrez frontend/js/theme-manager.js et ajoutez votre thème :

const THEMES = {
  'monokai-dark': { ... },
  'monokai-light': { ... },
  'gruvbox-dark': { ... },
  'gruvbox-light': { ... },
  // Ajoutez votre thème ici
  'mon-theme': {
    name: 'Mon Nouveau Thème',
    file: 'css/themes/mon-theme.css'
  }
};

Étape 3 : Ajouter l'option dans settings.html

Ouvrez frontend/settings.html et ajoutez une option :

<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>
  <option value="mon-theme">Mon Nouveau Thème</option>
</select>

Étape 4 : Tester votre thème

1. Rechargez l'application
2. Ouvrez test-theme.html
3. Sélectionnez votre nouveau thème
4. Vérifiez que toutes les variables CSS sont correctement définies

---

Dépannage

Le thème ne s'applique pas

Solution :

1. Vérifiez que theme-manager.js est bien chargé dans toutes vos pages HTML
2. Ouvrez la console du navigateur (F12) pour voir les erreurs
3. Assurez-vous que le fichier CSS du thème existe et est accessible

Les couleurs ne s'affichent pas correctement

Solution :

1. Vérifiez que toutes les variables CSS requises sont définies
2. Utilisez la page de test : http://localhost:8087/test-theme.html
3. Comparez avec un thème existant pour voir les variables manquantes

Le thème ne persiste pas après rechargement

Solution :

1. Vérifiez que localStorage est activé dans votre navigateur
2. Testez avec : console.log(localStorage.getItem('benchtools_theme'))
3. Assurez-vous que theme-manager.js s'initialise correctement

Erreur "ThemeManager is not defined"

Solution :

1. Vérifiez que <script src="js/theme-manager.js"></script> est présent
2. Assurez-vous qu'il est chargé avant les autres scripts qui l'utilisent
3. Rechargez la page avec Ctrl+F5 pour vider le cache

---

Ressources

• Documentation technique : FEATURE_THEME_SYSTEM.md
• Guide de création : frontend/css/themes/README.md
• Page de prévisualisation : http://localhost:8087/theme-preview.html
• Page de test : http://localhost:8087/test-theme.html

---

Support

Si vous rencontrez des problèmes ou avez des questions :

1. Consultez la documentation technique
2. Testez avec la page de test
3. Vérifiez la console du navigateur pour les erreurs
4. Ouvrez une issue sur le dépôt Git si le problème persiste

Bon theming ! 🎨