293 lines
7.9 KiB
Markdown
293 lines
7.9 KiB
Markdown
# 🎨 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 ! 🎨
|