# Thèmes Linux BenchTools

Ce répertoire contient tous les thèmes de couleur disponibles pour l'application.

## Thèmes disponibles

### 🌙 Thèmes sombres

#### Monokai Dark (par défaut)
- **Fichier**: `monokai-dark.css`
- **Palette**: Classique Monokai avec tons sombres
- **Meilleur pour**: Utilisation prolongée, environnements faiblement éclairés

#### Gruvbox Dark
- **Fichier**: `gruvbox-dark.css`
- **Palette**: Gruvbox avec tons chauds
- **Meilleur pour**: Ambiance rétro et chaleureuse

### ☀️ Thèmes clairs

#### Monokai Light
- **Fichier**: `monokai-light.css`
- **Palette**: Monokai adapté pour fond clair
- **Meilleur pour**: Environnements bien éclairés

#### Gruvbox Light
- **Fichier**: `gruvbox-light.css`
- **Palette**: Gruvbox adapté pour fond clair, tons crème
- **Meilleur pour**: Environnements lumineux avec ambiance chaleureuse

## Variables CSS requises

Chaque thème doit définir les variables suivantes :

### Couleurs de fond
- `--bg-primary`: Couleur de fond principale
- `--bg-secondary`: Couleur de fond secondaire (cartes)
- `--bg-tertiary`: Couleur de fond tertiaire (inputs)
- `--bg-hover`: Couleur au survol

### Couleurs de texte
- `--text-primary`: Texte principal
- `--text-secondary`: Texte secondaire
- `--text-muted`: Texte atténué

### Couleurs d'accent
- `--color-red`: Rouge
- `--color-orange`: Orange
- `--color-yellow`: Jaune
- `--color-green`: Vert
- `--color-cyan`: Cyan
- `--color-blue`: Bleu
- `--color-purple`: Violet

### Couleurs sémantiques
- `--color-success`: Succès (généralement vert)
- `--color-warning`: Avertissement (généralement orange)
- `--color-danger`: Danger (généralement rouge)
- `--color-info`: Information (généralement bleu/cyan)
- `--color-primary`: Couleur primaire de l'app

### Bordures
- `--border-color`: Couleur de bordure normale
- `--border-highlight`: Couleur de bordure accentuée

### Ombres
- `--shadow-sm`: Petite ombre
- `--shadow-md`: Ombre moyenne
- `--shadow-lg`: Grande ombre

## Ajouter un nouveau thème

1. Créez un fichier `mon-theme.css` dans ce répertoire
2. Définissez toutes les variables requises ci-dessus
3. Ajoutez le thème dans `theme-manager.js`
4. Ajoutez l'option dans `settings.html`

Exemple minimal :

```css
/**
 * Mon Nouveau Thème
 */

:root {
  --bg-primary: #...;
  --bg-secondary: #...;
  --bg-tertiary: #...;
  --bg-hover: #...;

  --text-primary: #...;
  --text-secondary: #...;
  --text-muted: #...;

  --color-red: #...;
  --color-orange: #...;
  --color-yellow: #...;
  --color-green: #...;
  --color-cyan: #...;
  --color-blue: #...;
  --color-purple: #...;

  --color-success: #...;
  --color-warning: #...;
  --color-danger: #...;
  --color-info: #...;
  --color-primary: #...;

  --border-color: #...;
  --border-highlight: #...;

  --shadow-sm: 0 2px 4px rgba(...);
  --shadow-md: 0 4px 12px rgba(...);
  --shadow-lg: 0 8px 24px rgba(...);
}
```

## Aperçu

Pour voir un aperçu de tous les thèmes, ouvrez :
`http://localhost:8087/theme-preview.html`