# 🎨 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](#changer-de-thème)
2. [Thèmes disponibles](#thèmes-disponibles)
3. [Aperçu des thèmes](#aperçu-des-thèmes)
4. [Créer un nouveau thème](#créer-un-nouveau-thème)
5. [Dépannage](#dépannage)

---

## Changer de thème

### Méthode 1 : Via l'interface Settings

1. Ouvrez la page **Settings** : [http://localhost:8087/settings.html](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

![Settings Theme Selector](../screenshots/theme-selector.png)

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

1. Ouvrez la page **Theme Preview** : [http://localhost:8087/theme-preview.html](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)

```javascript
// 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](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` :

```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 :

```javascript
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 :

```html
<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](http://localhost:8087/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](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](FEATURE_THEME_SYSTEM.md)
- **Guide de création** : [frontend/css/themes/README.md](../frontend/css/themes/README.md)
- **Page de prévisualisation** : [http://localhost:8087/theme-preview.html](http://localhost:8087/theme-preview.html)
- **Page de test** : [http://localhost:8087/test-theme.html](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 ! 🎨