Systeme de themes : Base (sombre) + SikaPics (rose elegant)

- themes.css : variables et overrides par theme via data-theme
- SikaPics : palette rose/violet, fond clair, typo Montserrat/Dancing Script
- Selecteur de theme dans admin > Evenement
- Preview live du theme dans l'admin

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-07 18:06:59 +02:00
parent 05e2c8318b
commit 626db8905a
4 changed files with 220 additions and 3 deletions

View File

@@ -519,6 +519,7 @@ function setupToggleListeners() {
async function chargerEvenementAdmin() {
const event = config.evenement || {};
document.getElementById('admin-theme').value = event.theme || 'base';
setValue('admin-nom-event', event.nom);
setValue('admin-couleur-primaire', event.couleur_primaire || '#e91e63');
setValue('admin-couleur-secondaire', event.couleur_secondaire || '#ffffff');
@@ -527,6 +528,10 @@ async function chargerEvenementAdmin() {
if (event.media_accueil) select.value = event.media_accueil;
}
function changerTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
}
async function rafraichirMediaAccueil() {
const data = await apiGet('/api/animations/custom');
const select = document.getElementById('admin-media-accueil');
@@ -556,6 +561,7 @@ async function uploaderMediaAccueil() {
async function sauvegarderEvenement() {
await apiPost('/api/config', {
evenement: {
theme: document.getElementById('admin-theme').value,
nom: getValue('admin-nom-event'),
couleur_primaire: getValue('admin-couleur-primaire'),
couleur_secondaire: getValue('admin-couleur-secondaire'),

View File

@@ -21,9 +21,15 @@ function appliquerConfig() {
const event = config.evenement || {};
const fonc = config.fonctionnalites || {};
// Couleurs
document.documentElement.style.setProperty('--primaire', event.couleur_primaire || '#e91e63');
document.documentElement.style.setProperty('--secondaire', event.couleur_secondaire || '#ffffff');
// Theme
const theme = event.theme || 'base';
document.documentElement.setAttribute('data-theme', theme);
// Couleurs (seulement si theme base, sinon le theme CSS gere)
if (theme === 'base') {
document.documentElement.style.setProperty('--primaire', event.couleur_primaire || '#e91e63');
document.documentElement.style.setProperty('--secondaire', event.couleur_secondaire || '#ffffff');
}
// Nom evenement
const h1 = document.getElementById('nom-evenement');