LarappeUI

Nouveaux Thèmes - LarappeUI

Vue d’ensemble

Ce document décrit les nouveaux thèmes ajoutés au système de thèmes LarappeUI, portant le total à 25 thèmes disponibles.

Nouveaux Thèmes Ajoutés

Thèmes Naturels

Forest Night

• Clé : forest-night
• Description : Version nocturne du thème forest
• Couleurs : Tons verts sombres sur fond noir
• Utilisation : Parfait pour les applications nocturnes avec une touche naturelle

Sakura

• Clé : sakura
• Description : Thème floral japonais
• Couleurs : Roses et violets doux
• Utilisation : Applications avec une esthétique japonaise ou romantique

Summer

• Clé : summer
• Description : Couleurs estivales chaleureuses
• Couleurs : Oranges et jaunes ensoleillés
• Utilisation : Applications saisonnières ou avec une ambiance chaleureuse

Thèmes Créatifs

Retro 80s

• Clé : retro80s
• Description : Style rétro années 80
• Couleurs : Néons vifs (rose, cyan, jaune)
• Utilisation : Applications avec une esthétique rétro-gaming

Space

• Clé : space
• Description : Thème spatial mystérieux
• Couleurs : Violets et bleus profonds sur fond sombre
• Utilisation : Applications scientifiques ou futuristes

Thèmes Spéciaux

Coffee

• Clé : coffee
• Description : Tons café chaleureux
• Couleurs : Marrons et beiges café
• Utilisation : Applications avec une ambiance café ou chaleureuse

Vintage

• Clé : vintage
• Description : Style vintage classique
• Couleurs : Marrons et sépias anciens
• Utilisation : Applications avec une esthétique rétro classique

Monokai

• Clé : monokai
• Description : Palette Monokai pour développeurs
• Couleurs : Palette de couleurs optimisée pour le code
• Utilisation : Applications de développement ou d’édition de code

Thèmes Solarized

Solarized Light

• Clé : solarized-light
• Description : Palette Solarized claire
• Couleurs : Palette Solarized optimisée pour la lecture
• Utilisation : Applications nécessitant une excellente lisibilité

Solarized Dark

• Clé : solarized-dark
• Description : Palette Solarized sombre
• Couleurs : Palette Solarized sombre optimisée pour la lecture
• Utilisation : Applications nécessitant une excellente lisibilité en mode sombre

Thèmes Manquants Ajoutés à l’Interface

Thèmes Professionnels

Enterprise

• Clé : enterprise
• Description : Thème entreprise sobre
• Couleurs : Bleus professionnels et gris
• Utilisation : Applications d’entreprise

Modern

• Clé : modern
• Description : Thème moderne vibrant
• Couleurs : Violets modernes et gris
• Utilisation : Applications modernes et innovantes

Thèmes Créatifs

Neon

• Clé : neon
• Description : Couleurs néon vibrantes
• Couleurs : Néons vifs sur fond noir
• Utilisation : Applications avec une esthétique cyberpunk

Cyberpunk

• Clé : cyberpunk
• Description : Thème cyberpunk futuriste
• Couleurs : Néons cyan et magenta
• Utilisation : Applications futuristes

Retro

• Clé : retro
• Description : Style rétro classique
• Couleurs : Oranges et marrons rétro
• Utilisation : Applications avec une esthétique rétro classique

Utilisation

Application des Nouveaux Thèmes

// Appliquer un nouveau thème
ThemeManager.applyTheme('forest-night');
ThemeManager.applyTheme('sakura');
ThemeManager.applyTheme('retro80s');

Sélecteur HTML

<select data-theme-selector>
    <option value="forest-night">Forest Night</option>
    <option value="sakura">Sakura</option>
    <option value="summer">Summer</option>
    <option value="retro80s">Retro 80s</option>
    <option value="space">Space</option>
    <option value="coffee">Coffee</option>
    <option value="vintage">Vintage</option>
    <option value="monokai">Monokai</option>
    <option value="solarized-light">Solarized Light</option>
    <option value="solarized-dark">Solarized Dark</option>
</select>

Variables CSS

Chaque nouveau thème définit ses propres variables CSS :

.theme-forest-night {
    --color-primary: #10b981;
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    /* ... autres variables */
}

.theme-sakura {
    --color-primary: #ec4899;
    --color-background: #fdf2f8;
    --color-surface: #fce7f3;
    --color-text: #831843;
    /* ... autres variables */
}

Catégorisation

Les nouveaux thèmes sont organisés en catégories :

• Base : 3 thèmes (light, dark, pro)
• Nature : 6 thèmes (forest, forest-night, sea, sakura, summer, sunset)
• Créatif : 7 thèmes (glass, 2d, retro, retro80s, space, neon, cyberpunk)
• Spécial : 5 thèmes (minimal, coffee, vintage, monokai, pastel)
• Solarized : 2 thèmes (solarized-light, solarized-dark)
• Professionnel : 2 thèmes (enterprise, modern)

Compatibilité

Tous les nouveaux thèmes sont :

• ✅ Compatibles avec le système de thèmes existant
• ✅ Intégrés dans le ThemeManager JavaScript
• ✅ Disponibles dans toutes les interfaces utilisateur
• ✅ Documentés et testés
• ✅ Optimisés pour la lisibilité et l’accessibilité

Tests

Pour tester les nouveaux thèmes :

1. Visitez /themes-showcase pour voir tous les thèmes
2. Visitez /test-themes pour tester les thèmes individuellement
3. Utilisez le gestionnaire de thèmes pour changer de thème en temps réel

Migration

Les nouveaux thèmes sont automatiquement disponibles sans modification du code existant. Le système de thèmes existant continue de fonctionner normalement avec les nouveaux thèmes.