122 lines
3.0 KiB
Markdown
122 lines
3.0 KiB
Markdown
# 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`
|