# 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é :

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

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

#### `ThemeManager.applyTheme(theme)`
Applique un thème et sauvegarde la préférence.

```javascript
ThemeManager.applyTheme('gruvbox-dark');
```

#### `ThemeManager.loadTheme(theme)`
Charge un thème sans sauvegarder la préférence.

```javascript
ThemeManager.loadTheme('monokai-light');
```

#### `ThemeManager.themes`
Objet contenant la configuration de tous les thèmes disponibles.

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

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

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

```html
<!-- 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](../frontend/settings.html) contient un sélecteur de thème :

```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>
</select>
```

La fonction `saveThemePreference()` dans [settings.js](../frontend/js/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`
   ```css
   :root {
     --bg-primary: #...;
     --bg-secondary: #...;
     /* ... toutes les variables requises ... */
   }
   ```

2. **Déclarer le thème** dans `theme-manager.js`
   ```javascript
   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`
   ```html
   <option value="mon-theme">Mon Nouveau Thème</option>
   ```

## Tests

Pour tester le système de thèmes :

1. Ouvrir [settings.html](http://localhost:8087/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