Thèmes et layouts

Présentation

Le système de thèmes de Fatplant permet de personnaliser entièrement l’apparence du frontend public sans modifier le core. Un thème définit les composants visuels, les tokens de design et les layouts disponibles pour le page builder.

Thèmes

Un thème est un ensemble de fichiers Svelte et CSS qui surcharge les rendus par défaut du frontend SSR. Chaque instance Fatplant utilise un seul thème actif, configurable depuis l’administration.

Structure d’un thème

mon-theme/
├── theme.json          # Métadonnées du thème
├── tokens.css          # Variables CSS (couleurs, typographie, espacements)
├── layouts/            # Layouts disponibles
│   ├── default.svelte
│   ├── article.svelte
│   └── landing.svelte
└── modules/            # Surcharge des modules du page builder
    ├── text.svelte
    ├── image.svelte
    └── cta.svelte

theme.json

{
  "name": "Mon Thème",
  "version": "1.0.0",
  "author": "Mon équipe",
  "layouts": ["default", "article", "landing"],
  "defaultLayout": "default"
}

Bibliothèque de layouts

Un layout est un gabarit de page qui définit la structure globale : header, footer, sidebar, zones de contenu. Le page builder s’insère dans la zone principale du layout.

Chaque layout expose des slots que le frontend SSR remplit automatiquement :

<!-- layouts/article.svelte -->
<script>
  export let article;
  export let children;
</script>

<header>
  <nav><!-- navigation --></nav>
</header>

<main>
  <article>
    <h1>{article.title}</h1>
    <div class="content">
      <!-- Contenu du page builder injecté ici -->
      {@render children()}
    </div>
  </article>
  <aside>
    <!-- Articles liés, publicités, etc. -->
  </aside>
</main>

<footer><!-- pied de page --></footer>

Assigner un layout

Dans l’administration, chaque Page peut se voir assigner un layout spécifique. Pour les Articles, le layout par défaut du thème est utilisé (typiquement article.svelte).

Tokens CSS

Les tokens CSS sont des variables CSS définies dans tokens.css qui centralisent les valeurs de design :

/* tokens.css */
:root {
  /* Couleurs */
  --color-primary: #1a56db;
  --color-secondary: #6b7280;
  --color-background: #ffffff;
  --color-text: #111827;
  --color-text-muted: #6b7280;

  /* Typographie */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Espacements */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  /* Bordures */
  --border-radius: 0.375rem;
  --border-color: #e5e7eb;
}

Ces variables sont utilisées dans tous les composants du thème et peuvent être surchargées depuis l’administration via l’éditeur de thème (couleurs, polices).

CSS personnalisé

L’administration propose un éditeur de CSS personnalisé qui permet d’injecter des règles additionnelles sans modifier les fichiers du thème. Ce CSS est appliqué après les tokens et les styles du thème.

C’est utile pour des ajustements rapides sans avoir à reconstruire le thème.

Surcharge de modules

Un thème peut surcharger le rendu de n’importe quel module du page builder en fournissant un composant Svelte du même nom dans le dossier modules/ :

<!-- modules/cta.svelte - version personnalisée du module CTA -->
<script>
  export let label = 'En savoir plus';
  export let url = '#';
  export let variant = 'primary';
</script>

<a href={url} class="btn btn--{variant}">
  {label}
  <span class="arrow">→</span>
</a>

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
  }
</style>

Installer un thème

# Copier le thème dans le répertoire des thèmes
cp -r mon-theme/ /opt/fatplant/themes/

# Activer le thème depuis l'administration
# Paramètres > Thème > Sélectionner "Mon Thème"

Les thèmes peuvent également être installés via des plugins (voir Plugins).