242 lines
6.4 KiB
Markdown
242 lines
6.4 KiB
Markdown
# 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
|