serv_benchmark/frontend/css/themes/README.md

Thèmes Linux BenchTools

Ce répertoire contient tous les thèmes de couleur disponibles pour l'application.

Thèmes disponibles

🌙 Thèmes sombres

Monokai Dark (par défaut)

• Fichier: monokai-dark.css
• Palette: Classique Monokai avec tons sombres
• Meilleur pour: Utilisation prolongée, environnements faiblement éclairés

Gruvbox Dark

• Fichier: gruvbox-dark.css
• Palette: Gruvbox avec tons chauds
• Meilleur pour: Ambiance rétro et chaleureuse

☀️ Thèmes clairs

Monokai Light

• Fichier: monokai-light.css
• Palette: Monokai adapté pour fond clair
• Meilleur pour: Environnements bien éclairés

Gruvbox Light

• Fichier: gruvbox-light.css
• Palette: Gruvbox adapté pour fond clair, tons crème
• Meilleur pour: Environnements lumineux avec ambiance chaleureuse

Variables CSS requises

Chaque thème doit définir les variables suivantes :

Couleurs de fond

• --bg-primary: Couleur de fond principale
• --bg-secondary: Couleur de fond secondaire (cartes)
• --bg-tertiary: Couleur de fond tertiaire (inputs)
• --bg-hover: Couleur au survol

Couleurs de texte

• --text-primary: Texte principal
• --text-secondary: Texte secondaire
• --text-muted: Texte atténué

Couleurs d'accent

• --color-red: Rouge
• --color-orange: Orange
• --color-yellow: Jaune
• --color-green: Vert
• --color-cyan: Cyan
• --color-blue: Bleu
• --color-purple: Violet

Couleurs sémantiques

• --color-success: Succès (généralement vert)
• --color-warning: Avertissement (généralement orange)
• --color-danger: Danger (généralement rouge)
• --color-info: Information (généralement bleu/cyan)
• --color-primary: Couleur primaire de l'app

Bordures

• --border-color: Couleur de bordure normale
• --border-highlight: Couleur de bordure accentuée

Ombres

• --shadow-sm: Petite ombre
• --shadow-md: Ombre moyenne
• --shadow-lg: Grande ombre

Ajouter un nouveau thème

1. Créez un fichier mon-theme.css dans ce répertoire
2. Définissez toutes les variables requises ci-dessus
3. Ajoutez le thème dans theme-manager.js
4. Ajoutez l'option dans settings.html

Exemple minimal :

/**
 * Mon Nouveau Thème
 */

:root {
  --bg-primary: #...;
  --bg-secondary: #...;
  --bg-tertiary: #...;
  --bg-hover: #...;

  --text-primary: #...;
  --text-secondary: #...;
  --text-muted: #...;

  --color-red: #...;
  --color-orange: #...;
  --color-yellow: #...;
  --color-green: #...;
  --color-cyan: #...;
  --color-blue: #...;
  --color-purple: #...;

  --color-success: #...;
  --color-warning: #...;
  --color-danger: #...;
  --color-info: #...;
  --color-primary: #...;

  --border-color: #...;
  --border-highlight: #...;

  --shadow-sm: 0 2px 4px rgba(...);
  --shadow-md: 0 4px 12px rgba(...);
  --shadow-lg: 0 8px 24px rgba(...);
}

Aperçu

Pour voir un aperçu de tous les thèmes, ouvrez : http://localhost:8087/theme-preview.html