LarappeUI

Système de Thèmes - LarappeUI

Vue d’ensemble

Le système de thèmes de LarappeUI permet de personnaliser l’apparence de l’application avec différents thèmes prédéfinis et la possibilité de créer des thèmes personnalisés.

Thèmes Disponibles

LarappeUI propose 20 thèmes organisés en 6 catégories distinctes :

🎯 Thèmes de Base (3)

  1. Light - Thème clair par défaut avec des couleurs modernes
  2. Dark - Thème sombre élégant pour une expérience nocturne
  3. Pro (FrappeUI) - Thème professionnel inspiré de FrappeUI

🌿 Thèmes Naturels (5)

  1. Forest - Thème forestier avec des tons verts naturels
  2. Forest Night - Version nocturne du thème forest
  3. Sea - Thème marin avec des bleus océaniques
  4. Sakura - Thème floral japonais avec des tons roses
  5. Summer - Couleurs estivales chaleureuses

🎨 Thèmes Créatifs (4)

  1. Glass - Effet de verre avec transparence
  2. 2D - Couleurs géométriques vives
  3. Retro 80s - Style rétro années 80
  4. Space - Thème spatial mystérieux

⚡ Thèmes Spécialisés (5)

  1. Minimal - Design minimaliste épuré
  2. Coffee - Tons café chaleureux
  3. Vintage - Style vintage classique
  4. Monokai - Palette Monokai pour développeurs
  5. Pastel - Couleurs douces et apaisantes

🌞 Thèmes Solarized (2)

  1. Solarized Light - Palette Solarized claire
  2. Solarized Dark - Palette Solarized sombre

💼 Thèmes Professionnels (1)

  1. Pro (FrappeUI) - Thème professionnel

Note : Pour une documentation complète des thèmes étendus, consultez extended-themes.md.

Structure des Fichiers

public/
├── css/
│   ├── themes.css          # Variables CSS de base
│   ├── themes-complete.css # Thèmes complets
│   ├── themes-extended.css # Thèmes étendus
│   └── themes-all.css      # Tous les thèmes (20 thèmes)
├── js/
│   └── themes-manager.js   # Gestionnaire JavaScript des thèmes
resources/
├── css/
│   └── themes/             # Fichiers CSS individuels des thèmes
└── views/
    ├── themes-manager.blade.php    # Interface de gestion des thèmes
    └── themes-showcase.blade.php   # Showcase des thèmes

Variables CSS

Chaque thème utilise les variables CSS suivantes :

:root {
    --color-primary: #3b82f6; /* Couleur principale */
    --color-secondary: #6b7280; /* Couleur secondaire */
    --color-success: #10b981; /* Couleur de succès */
    --color-warning: #f59e0b; /* Couleur d'avertissement */
    --color-danger: #ef4444; /* Couleur de danger */
    --color-info: #06b6d4; /* Couleur d'information */
    --color-background: #ffffff; /* Couleur d'arrière-plan */
    --color-surface: #f9fafb; /* Couleur de surface */
    --color-text: #111827; /* Couleur de texte */
    --color-textSecondary: #6b7280; /* Couleur de texte secondaire */
    --color-border: #e5e7eb; /* Couleur de bordure */
    --color-accent: #f59e42; /* Couleur d'accent */
}

Utilisation

Dans les Vues Blade

<!-- Utiliser les classes de couleur -->
<button class="bg-primary text-white">Bouton Principal</button>
<div class="bg-success text-white">Message de succès</div>
<p class="text-danger">Message d'erreur</p>

Dans JavaScript

// Changer de thème
if (window.ThemeManager) {
    window.ThemeManager.applyTheme("dark");
}

// Obtenir le thème actuel
const currentTheme = window.ThemeManager.getCurrentTheme();

// Obtenir les couleurs d'un thème
const colors = window.ThemeManager.getThemeColors("light");

Gestionnaire de Thèmes

Le fichier themes-manager.js contient la classe ThemeManager qui gère :

Interface de Gestion

L’interface de gestion des thèmes (/themes-manager) permet de :

  1. Prévisualiser les thèmes sur des composants
  2. Sélectionner un thème parmi les disponibles
  3. Personnaliser les couleurs d’un thème
  4. Exporter les thèmes personnalisés

Personnalisation

Créer un Thème Personnalisé

const customColors = {
    primary: "#ff6b6b",
    secondary: "#4ecdc4",
    // ... autres couleurs
};

window.ThemeManager.applyCustomTheme(customColors);

Ajouter un Nouveau Thème

  1. Ajouter les variables CSS dans public/css/themes.css
  2. Ajouter la configuration dans public/js/themes-manager.js
  3. Mettre à jour l’interface dans themes-manager.blade.php

Compatibilité

Dépannage

Erreurs Courantes

  1. Fichier JavaScript manquant : Vérifier que themes-manager.js existe dans public/js/
  2. Erreur Alpine.js : Vérifier la syntaxe JavaScript dans les expressions Alpine
  3. Thème non appliqué : Vérifier que le fichier CSS themes.css est chargé

Solutions