141 lines
4.7 KiB
Markdown
141 lines
4.7 KiB
Markdown
# 🌓 Thème Mix Monokai-Gruvbox
|
|
|
|
## Vue d'ensemble
|
|
|
|
Le thème **Mix Monokai-Gruvbox** est un thème hybride qui combine le meilleur des deux palettes populaires :
|
|
- **Arrière-plans** : Monokai (noir profond et contraste élevé)
|
|
- **Couleurs d'accent** : Gruvbox (palette chaleureuse et rétro)
|
|
- **Texte** : Gruvbox (beige/crème pour une meilleure lisibilité)
|
|
|
|
## Philosophie du thème
|
|
|
|
Ce thème a été créé pour les utilisateurs qui :
|
|
- Aiment le **contraste élevé** des fonds sombres Monokai
|
|
- Préfèrent les **couleurs chaleureuses** de Gruvbox aux couleurs néon de Monokai
|
|
- Veulent une **expérience visuelle unique** qui se démarque
|
|
|
|
## Palette de couleurs
|
|
|
|
### Arrière-plans (Monokai)
|
|
```css
|
|
--bg-primary: #1e1e1e /* Noir profond */
|
|
--bg-secondary: #2d2d2d /* Gris très foncé */
|
|
--bg-tertiary: #3e3e3e /* Gris foncé */
|
|
--bg-hover: #4e4e4e /* Gris moyen pour survol */
|
|
```
|
|
|
|
### Texte (Gruvbox)
|
|
```css
|
|
--text-primary: #ebdbb2 /* Beige clair */
|
|
--text-secondary: #d5c4a1 /* Beige moyen */
|
|
--text-muted: #a89984 /* Beige foncé */
|
|
```
|
|
|
|
### Couleurs d'accent (Gruvbox)
|
|
```css
|
|
--color-red: #fb4934 /* Rouge vif */
|
|
--color-orange: #fe8019 /* Orange chaud */
|
|
--color-yellow: #fabd2f /* Jaune doré */
|
|
--color-green: #b8bb26 /* Vert lime */
|
|
--color-cyan: #8ec07c /* Cyan/aqua */
|
|
--color-blue: #83a598 /* Bleu grisé */
|
|
--color-purple: #d3869b /* Violet/rose */
|
|
```
|
|
|
|
### Couleurs sémantiques
|
|
```css
|
|
--color-success: #b8bb26 /* Vert Gruvbox */
|
|
--color-warning: #fabd2f /* Jaune Gruvbox */
|
|
--color-danger: #fb4934 /* Rouge Gruvbox */
|
|
--color-info: #83a598 /* Bleu Gruvbox */
|
|
--color-primary: #b8bb26 /* Vert (couleur principale de l'app) */
|
|
```
|
|
|
|
## Comparaison avec les autres thèmes
|
|
|
|
| Caractéristique | Monokai Dark | Gruvbox Dark | Mix Monokai-Gruvbox |
|
|
|----------------|--------------|--------------|---------------------|
|
|
| Fond principal | `#1e1e1e` | `#282828` | `#1e1e1e` (Monokai) |
|
|
| Texte principal | `#f8f8f2` | `#ebdbb2` | `#ebdbb2` (Gruvbox) |
|
|
| Couleur primaire | `#a6e22e` | `#b8bb26` | `#b8bb26` (Gruvbox) |
|
|
| Température | Froide | Chaude | Chaude |
|
|
| Contraste | Très élevé | Élevé | Très élevé |
|
|
|
|
## Cas d'usage
|
|
|
|
### ✅ Idéal pour :
|
|
- Sessions de travail prolongées (fond noir profond = moins de fatigue oculaire)
|
|
- Environnements très faiblement éclairés
|
|
- Utilisateurs qui trouvent Monokai trop "néon"
|
|
- Utilisateurs qui trouvent Gruvbox Dark pas assez contrasté
|
|
- Ceux qui veulent une ambiance chaleureuse sans sacrifier le contraste
|
|
|
|
### ❌ Moins adapté pour :
|
|
- Environnements lumineux (préférer un thème Light)
|
|
- Utilisateurs préférant une palette cohérente d'un seul thème
|
|
- Ceux qui n'aiment pas mélanger les styles
|
|
|
|
## Exemples visuels
|
|
|
|
### Boutons
|
|
- **Primary** : Fond vert `#b8bb26` (Gruvbox) sur fond noir `#1e1e1e` (Monokai)
|
|
- **Danger** : Fond rouge `#fb4934` (Gruvbox) sur fond noir
|
|
- **Info** : Fond bleu `#83a598` (Gruvbox) sur fond noir
|
|
|
|
### Badges
|
|
- **Success** : Vert chaud Gruvbox au lieu du vert néon Monokai
|
|
- **Warning** : Jaune doré Gruvbox au lieu du jaune vif Monokai
|
|
- **Danger** : Rouge vif Gruvbox
|
|
|
|
### Cartes et sections
|
|
- Arrière-plan des cartes : `#2d2d2d` (gris très foncé Monokai)
|
|
- Titres et headers : Couleurs Gruvbox (bleu `#83a598`, vert `#b8bb26`)
|
|
- Bordures : Tons Gruvbox `#504945`
|
|
|
|
## Installation
|
|
|
|
Le thème est déjà intégré dans l'application. Pour l'activer :
|
|
|
|
1. Ouvrez [Settings](http://localhost:8087/settings.html)
|
|
2. Dans la section "Thème d'interface", sélectionnez **"Mix Monokai-Gruvbox"**
|
|
3. Cliquez sur "Appliquer le thème"
|
|
4. La page se recharge automatiquement avec le nouveau thème
|
|
|
|
## Personnalisation
|
|
|
|
Pour créer votre propre variante de ce thème :
|
|
|
|
1. Copiez le fichier `frontend/css/themes/mix-monokai-gruvbox.css`
|
|
2. Modifiez les couleurs selon vos préférences
|
|
3. Déclarez le nouveau thème dans `theme-manager.js`
|
|
4. Ajoutez l'option dans `settings.html`
|
|
|
|
### Exemple de personnalisation
|
|
|
|
```css
|
|
/* Rendre le fond encore plus noir */
|
|
--bg-primary: #000000;
|
|
|
|
/* Utiliser le vert Monokai au lieu de Gruvbox */
|
|
--color-primary: #a6e22e;
|
|
|
|
/* Mixer texte Monokai et couleurs Gruvbox */
|
|
--text-primary: #f8f8f2; /* Texte Monokai */
|
|
--color-success: #b8bb26; /* Vert Gruvbox */
|
|
```
|
|
|
|
## Feedback
|
|
|
|
Ce thème a été créé suite à une demande utilisateur. Si vous avez des suggestions d'amélioration ou d'autres idées de thèmes hybrides, n'hésitez pas à les partager !
|
|
|
|
**Autres combinaisons possibles** :
|
|
- Mix Gruvbox-Monokai (inverse : fonds Gruvbox + couleurs Monokai)
|
|
- Mix Monokai-Light-Gruvbox-Dark (fond clair + couleurs sombres)
|
|
- Thèmes avec d'autres palettes (Nord, Dracula, Solarized, etc.)
|
|
|
|
---
|
|
|
|
**Fichier** : `frontend/css/themes/mix-monokai-gruvbox.css`
|
|
**Déclaré dans** : `frontend/js/theme-manager.js`
|
|
**Créé le** : 2026-01-11
|