✨ Nouvelles fonctionnalités
🌙 Mode sombre
Basculez entre les modes clair et sombre pour moins de fatigue visuelle. Le thème est sauvegardé automatiquement.
📝 Éditeur agrandi
L'éditeur CKEditor occupe maintenant 70% de l'écran pour plus de confort lors de la rédaction.
🎯 Mise en page optimisée
Formulaires en 2 colonnes, labels avec icônes, et meilleure organisation visuelle.
💾 Auto-save
Votre travail est sauvegardé automatiquement toutes les 2 secondes. Plus de perte de données !
🎨 Variables CSS
Personnalisez facilement les couleurs via des variables CSS. Adaptez le wiki à votre charte graphique.
📱 100% Responsive
Interface parfaitement adaptée sur desktop, tablette et mobile.
🔄 Avant / Après
❌ Avant
- Texte blanc sur blanc en mode sombre
- Éditeur trop petit (300px)
- Formulaire sur une seule colonne
- Pas de sauvegarde automatique
- Pas de mode sombre
✅ Après
- Contraste parfait en mode sombre
- Éditeur à 500px (ou 70vh)
- Formulaire optimisé en 2 colonnes
- Auto-save toutes les 2 secondes
- Mode sombre complet
🎨 Démonstration des composants
Champs de formulaire
Boutons
Alertes
✅ Ceci est un message de succès
❌ Ceci est un message d'erreur
ℹ️ Ceci est un message d'information
Badges de statut
Publié
Brouillon
💻 Code d'exemple
Activer le mode sombre
// Le thème est géré automatiquement par admin.js
document.getElementById('theme-toggle').addEventListener('click', function() {
const theme = document.documentElement.getAttribute('data-theme');
const newTheme = theme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
Personnaliser les couleurs
/* Dans admin.css */
[data-theme="dark"] {
--admin-bg: #1a1a1a; /* Fond principal */
--admin-surface: #2d2d2d; /* Fond des cartes */
--admin-text: #e0e0e0; /* Texte principal */
--admin-border: #404040; /* Bordures */
}
📚 Documentation
Pour plus d'informations sur l'installation et la personnalisation, consultez le fichier
UPGRADE_UX.md fourni avec cette mise à jour.