Files
monthly-report-kit/docs/CUSTOMIZATION.md
T
2026-06-24 14:40:43 +00:00

2.2 KiB

Anpassung des Designs

Designauswahl je Kunde

Jeder Kunde erhält in seinem Render-Payload eine Theme-ID:

{
  "design": {
    "theme": "forest-lodge",
    "palette_mode": "theme"
  }
}

GET /themes liefert alle verfügbaren IDs inklusive Beschreibung, Layoutfamilie und Farbpalette.

Farbmodus

  • theme: verwendet die vorkonfigurierte Farbpalette des gewählten Designs.
  • custom: verwendet die Farben aus dem Kunden-Payload, behält aber Layout und Typografie des Designs.
  • Ohne Angabe: modern und classic verwenden Kundenfarben, alle benannten Varianten ihre Theme-Palette.

Beispiel für kundenspezifische Farben:

{
  "design": {
    "theme": "executive-blue",
    "palette_mode": "custom",
    "primary_color": "#173B67",
    "secondary_color": "#2A6298",
    "accent_color": "#37A6B8",
    "text_color": "#182632",
    "muted_color": "#6B7A86",
    "surface_color": "#EEF3F7",
    "font_family": "Arial"
  }
}

Was je Kunde variieren darf

  • Logo
  • Theme-ID
  • optional Farbpalette
  • Kontaktzeile
  • Name und Objektbezeichnung

Global möglichst unverändert lassen:

  • Seitenformat und Ränder
  • Abschnittsreihenfolge
  • KPI-Anzahl
  • maximale Anzahl Empfehlungen
  • Textlängen und Seitenumbrüche

Am robustesten ist ein PNG oder SVG als Base64 Data URI:

data:image/png;base64,iVBORw0KGgo...

Damit benötigt Gotenberg keinen Zugriff auf externe URLs. Große Logos vorher verkleinern.

Eine neue Farbvariante anlegen

Für eine reine Farbvariante ist kein neues HTML nötig. In renderer/app/theme_catalog.py einen weiteren Eintrag mit vorhandener layout-Familie ergänzen und die Theme-ID im Enum von renderer/app/schemas/report-payload.schema.json eintragen.

Eine neue Layoutfamilie anlegen

  1. Ordner renderer/app/templates/<layout> erstellen.
  2. report.html.j2 anlegen; optional ein eigenes footer.html.j2.
  3. In renderer/app/theme_catalog.py ein Theme mit dieser layout-ID registrieren.
  4. Theme-ID im Report-Schema ergänzen.
  5. pytest -q ausführen.
  6. Mit python scripts/render-theme-gallery.py visuell prüfen.

Textlängen

Die maximalen Textlängen werden im Claude-Schema begrenzt. Inhalte sollten gekürzt werden, statt Schriftgrößen immer weiter zu reduzieren.