Files
serv_benchmark/docs/THEME_MIX_MONOKAI_GRUVBOX.md
2026-01-11 23:41:30 +01:00

4.7 KiB

🌓 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)

--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)

--text-primary: #ebdbb2   /* Beige clair */
--text-secondary: #d5c4a1 /* Beige moyen */
--text-muted: #a89984     /* Beige foncé */

Couleurs d'accent (Gruvbox)

--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

--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
  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

/* 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