add go bench client
This commit is contained in:
Gilles Soulier
292
docs/GUIDE_THEMES.md
Normal file
292
docs/GUIDE_THEMES.md
Normal file
@@ -0,0 +1,292 @@
|
||||
# 🎨 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
|
||||
|
||||
|
||||
|
||||
### 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 ! 🎨
|
||||
Reference in New Issue
Block a user