---
title: "Themes und Aussehen"
description: "Die Éclair-Themes und die 12 Art Directions ändern das Aussehen deiner Website, mit Live-Vorschau, ohne Eingriff ins HTML und ohne Folgen für dein SEO."
url: "https://eclaircms.org/de/dokumentation/designs"
lang: "de"
author: "Thierry Gustin"
published: "2026-10-30"
updated: "2026-11-01"
---

# Themes und Aussehen

> **Das Wichtigste** — Éclair bietet 12 Art Directions, die die ganze Bildwelt der Website verändern (Farbpalette, Titelschrift, Banner, Vorteile, Symbole), und 6 klassische Themes. Du probierst sie unter Einstellungen › Design in einer Live-Vorschau deiner echten Website aus, und nichts wird veröffentlicht, bevor du speicherst. Die KI kann drei Richtungen aus deinem Geschäft entwerfen. Die Kontraste sind garantiert, die Schrift kommt von deiner Website, und das HTML ändert sich nicht: Geschwindigkeit und SEO bleiben intakt.

Die Éclair-Themes ändern das Aussehen deiner Website mit einem Klick: Farbe, Schriften, Header und Darstellung der Listen. Seit 1.8 gehen die 12 Art Directions weiter und verändern die ganze Bildwelt der Website. Du probierst sie in der Live-Vorschau an deiner echten Website aus, am Desktop oder auf dem Smartphone, und nichts wird veröffentlicht, bevor du speicherst. Deine Inhalte, deine Geschwindigkeit und dein SEO bleiben dabei unverändert.

![Dieselbe Website einer Keramikwerkstatt, dargestellt mit den 6 Themes von Éclair: Éclair, Editorial, Atelier, Studio, Shop und Kontrast](https://eclaircms.org/media/2026/11/de-themes.webp)
*Eine Website, sechs Stile: Nur das Theme ändert sich, Inhalt und HTML bleiben gleich.*

## Was ist eine Art Direction?

Seit Éclair 1.8 geht eine **Art Direction** weiter als die klassischen Éclair-Themes: Sie verändert die ganze Bildwelt der Website, ausgehend von einer konkreten Idee (die Stadt bei Nacht, die Keramikwerkstatt, die Morgenzeitung). Farbpalette, Titelschrift, Größe der Überschriften, Ecken, Abstände, Aufbau des Banners, Layout der Vorteile, Farbbänder und Symbole ändern sich gemeinsam.

![Dieselbe Keramik-Website in sechs Art Directions: Nocturne, Galerie, Ton, Riviera, Pausenhof und Presse](https://eclaircms.org/media/2026/11/de-art-directions.webp)
*Dieselbe Website in sechs der zwölf Art Directions.*

| Richtung | Bildwelt | Titelschrift |
| --- | --- | --- |
| **Nocturne** | Die Stadt bei Nacht: tiefes Blau, bernsteinfarbenes Licht | Big Shoulders Display, in Großbuchstaben |
| **Galerie** | Weiße Wände, schwarze Werkschilder, ein Signalrot | Familjen Grotesk |
| **Ton** | Die Keramikwerkstatt: Sand, Terrakotta, weiche Formen | Young Serif |
| **Botanik** | Herbarium und Gewächshaus: tiefes Grün, salbeifarbenes Papier | DM Serif Display |
| **Plakat** | Das Schweizer Plakat: Schwarz auf gebrochenem Weiß, leuchtendes Orange | Archivo Black, in Großbuchstaben |
| **Riviera** | Am Meer: Marineblau, blasser Himmel, Koralle | Gloock |
| **Kanzlei** | Das Briefpapier: marineblaue Tinte, Bordeaux, feine Linien | Libre Caslon Display |
| **Neon** | Der Kreativbildschirm bei Nacht: fast Schwarz, Limettengrün | Unbounded |
| **Sanftheit** | Die Praxis: Puderrosa, Pflaume, viel Luft | Cormorant Garamond |
| **Baustelle** | Beton, Sicherheitsgelb, schmale Beschilderung | Barlow Condensed, in Großbuchstaben |
| **Pausenhof** | Der Schulhof: Himmelblau, Tomatenrot, runde Buchstaben | Fredoka |
| **Presse** | Die Morgenzeitung: Zeitungspapier, Titelseitenrot | Newsreader |

## Wie wählst du eine Art Direction und passt sie an?

1. Wähle unter **Einstellungen › Design** die Option **Art Direction** statt **Klassisches Theme**.
2. Klicke auf eine der 12 Karten und sieh dir die **Live-Vorschau** an: deine echte Website, am Desktop oder auf dem Smartphone.
3. Öffne **Richtung anpassen**, stelle ein, was du willst, und speichere dann: Vorher wird nichts veröffentlicht.

- **5 Farben**: Hintergrund, Bänder und Karten, Text, Sekundärtext, Akzent der Buttons und Links.
- **Schriftart für Überschriften**: 18 Schriften, ausgewählt wegen ihres Charakters, oder eine Systemschrift. **Schriftart für Fließtext**: eine Systemschrift, ohne Download.
- **Schreibweise**, **Größe der Überschriften**, **Ecken** (eckig, abgerundet, rund) und **Abstände** (kompakt, normal, luftig).
- **Karten** mit feiner Linie, als Farbfläche oder mit Schlagschatten, und **Startbanner** nebeneinander, als Plakat, randloses Vollbild, Editorial oder zentriert.
- **Vorteile** als Karten, Zeilen oder Spalten, **Abschnitte** einfarbig oder in Farbbändern und **Symbole**, gezeichnet statt als Emojis.

Header, Beitragslisten, Logo, Website-Icon, Fußzeile und eigenes CSS stellst du ein wie bei den klassischen Éclair-Themes. Um zum klassischen Theme zurückzukehren, wähle **Klassisches Theme** und speichere: Seine Einstellungen warten unverändert auf dich.

> **Immer lesbar, immer schnell** — Ganz gleich, welche Farben du wählst: Éclair passt den Text auf einen Kontrast von **7:1** zum Hintergrund an und Sekundärtext, Links und Buttons auf 4,5:1, auch auf getönten Hintergründen. Die Titelschrift (12 bis 27 KB) lädt dein Server einmal von Fontsource herunter (SIL Open Font License), danach liefert deine Website sie selbst aus und lädt sie vorab: kein Drittanbieter für deine Besucher. Blockiert dein Hoster ausgehende Verbindungen, weist dich eine Meldung darauf hin, und eine Ersatzschrift aus derselben Familie springt ein.

## Wie entwirft die KI deine Art Direction?

![Einstellungen › Design: Auswahl zwischen Art Direction und klassischem Theme, darunter die Karten der 12 Richtungen](https://eclaircms.org/media/2026/11/de-direction-settings.webp)
*Einstellungen › Design: Art Direction oder klassisches Theme, darunter die 12 Karten.*

Wenn der [KI-Assistent](https://eclaircms.org/de/dokumentation/ki-assistent) aktiviert ist, erscheint unter den Karten **Meine Richtung mit KI entwerfen**. Beschreibe dein Geschäft, deine Zielgruppe und die gewünschte Stimmung („Bio-Bäckerei im Viertel in Freiburg, Familien als Kundschaft, warm, aber modern“) und klicke dann auf **3 Richtungen vorschlagen**.

Die KI liest auch die Beschreibung deiner Website und dein Redaktionsprofil. Sie geht von der konkreten Welt deines Geschäfts aus, gibt jedem Vorschlag eine präzise Referenz und schlägt drei wirklich unterschiedliche Richtungen vor, fernab der Standardwahl deiner Branche. Die Vorschläge erscheinen vor den Karten, mit ✦ markiert: Probiere sie in der Vorschau aus, passe sie an und speichere den, der dir gefällt. Die KI wählt nur aus den Einstellungen von Éclair und schreibt nie CSS. Geschätzte Kosten: etwa 0,03 $ mit Claude Sonnet 5.5, abgezogen vom Budget des Assistenten. Die Methode ist angepasst nach [Impeccable](https://github.com/pbakaus/impeccable) von Paul Bakaus.

## Welche sind die 6 klassischen Éclair-Themes?

Die Éclair-Themes gehören seit Version 1.3.0 zum Lieferumfang des CMS. Jedes hat seinen eigenen Charakter und seine Zielgruppe:

| Theme | Charakter | Für wen |
| --- | --- | --- |
| **Éclair** | Klar, modern und vielseitig: das Original-Theme | Alle Websites |
| **Editorial** | Magazin-Look: Serifenschrift, feine Linien, Initiale, hervorgehobener Beitrag | Blogs, Medien, Autoren |
| **Atelier** | Warm und handgemacht: Creme- und Terrakottatöne, weiche Formen | Handwerksbetriebe, Restaurants, Wellness |
| **Studio** | Minimalistisches Portfolio: Schwarz-Weiß, große Überschriften, Bilder ohne Rahmen | Fotografen, Designer, Agenturen |
| **Shop** | Zum Verkaufen gemacht: quadratische Fotos, fixierter Header, markante Buttons | Shops, Kreative |
| **Kontrast** | Maximale Lesbarkeit: große Schrift, starke Kontraste, unterstrichene Links | Öffentliche Einrichtungen, Vereine, Senioren |

Alle Themes zeigen dieselben Blöcke, den Blog und den [schlanken Shop](https://eclaircms.org/de/dokumentation/shop): Wähle das Theme, das zu deinem Beruf passt, nicht das, das eine bestimmte Funktion „enthält“.

## Wie wechselst du das Theme?

Fünf Schritte genügen, Vorschau inklusive:

1. Öffne **Einstellungen › Design**.
2. Klicke im Feld **Theme** auf die Karte, die dir gefällt. Ihre Farbe, ihre Schriften, ihr Header und ihre Darstellung der Listen werden sofort ins Formular übernommen.
3. Wähle unter **Live-Vorschau** die angezeigte Seite („Startseite“, „Blog“, „Ein Beitrag“, „Der Shop“ oder „Ein Produkt“) und wechsle dann von **Desktop** zu **Mobil**. Du kannst in der Vorschau klicken: Links bleiben in der Vorschau.
4. Passe an, was du möchtest (Hauptfarbe, Schriften, Header, Listen, Dunkelmodus): Die Vorschau folgt jeder Änderung.
5. Klicke auf **Speichern**. Der Seiten-Cache wird automatisch geleert: Deine Website ändert sich sofort.

![Einstellungen › Design in Éclair: die sechs Theme-Karten mit ausgewähltem Theme Shop und darunter die Live-Vorschau der Startseite in der Desktop-Ansicht](https://eclaircms.org/media/2026/11/de-appearance-preview.webp)
*Die Live-Vorschau zeigt deine echte Website mit dem gewählten Theme; nichts wird veröffentlicht, bevor du speicherst.*

> **Notiere dir deine Einstellungen, bevor du Themes ausprobierst** — Wenn du ein Theme auswählst, ersetzt es Farbe, Schriften, Header und Listen im Formular durch seine empfohlenen Einstellungen. Hast du sie angepasst, notiere sie dir, bevor du andere Themes ausprobierst. Solange du nicht auf Speichern klickst, wird nichts geändert: Verlasse einfach die Seite, um deine aktuellen Einstellungen zu behalten.

## Was stellt jedes Theme ein, wenn du es auswählst?

Das sind die empfohlenen Einstellungen, die jedes Theme übernimmt. Du kannst alle danach ändern:

| Theme | Hauptfarbe | Schriftarten (Überschriften / Text) | Header | Listen |
| --- | --- | --- | --- | --- |
| Éclair | Violett `#5b4cf0` | System (modern) | Logo links | Kartenraster |
| Editorial | Rot `#b42318` | Elegante Serifenschrift / Moderne Serifenschrift | Zentriert | Kartenraster |
| Atelier | Terrakotta `#c2410c` | Humanistisch | Logo links | Kartenraster |
| Studio | Schwarz `#111111` | Neo-Grotesk | Logo links | Kartenraster |
| Shop | Blaugrün `#0f766e` | Geometrisch / System (modern) | Zentriert | Kartenraster |
| Kontrast | Blau `#1d4ed8` | System (modern) | Logo links | Liste: Bild links |

## Welche weiteren Einstellungen zum Aussehen kannst du ändern?

Ebenfalls unter **Einstellungen › Design**, unterhalb der Vorschau:

| Einstellung | Was du wählst |
| --- | --- |
| **Header** | „Logo links, Menü rechts“ oder „Zentriert: Logo über dem Menü“ |
| **Beitrags- und Produktlisten** | „Kartenraster“ oder „Liste: Bild links“ |
| **Logo** | Ein PNG oder WebP mit transparentem Hintergrund, etwa 400 px breit |
| **Website-Icon (Favicon)** | Ein quadratisches Bild von mindestens 512 px; ohne Icon wird ein Blitz in deiner Farbe erzeugt |
| **Hauptfarbe** | Jede beliebige Farbe: Der Textkontrast wird automatisch angepasst |
| **Schriftart für Überschriften** und **Schriftart für Fließtext** | Systemschriftarten: kein Download, sofortige Anzeige |
| **Dunkelmodus** | „Automatisch (je nach Gerät des Besuchers)“ oder „Immer hell“ |
| **Footer-Text** | Dein Text und die Option **„Erstellt mit ⚡ Éclair“ anzeigen** |
| **Eigenes CSS** | Deine eigenen Stilregeln, maximal 64 KB |

Bei der Hauptfarbe strebt Éclair einen Kontrast von mindestens 4,5:1 zwischen Links und Hintergrund an, die Schwelle des [WCAG-Kriteriums 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) für Fließtext. Fehlt deiner Farbe dieser Kontrast, verwenden die Links eine dunklere Variante (im Dunkelmodus eine hellere), und der Text der Buttons wird weiß oder schwarz, je nachdem, was besser lesbar ist.

## Warum bremsen die Éclair-Themes deine Website nicht aus?

Weil jedes Theme nur ein **Stylesheet von 1,5 bis 3 KB** ist, das zum Basis-Stylesheet hinzukommt. Das Theme Éclair fügt nichts hinzu: Es ist der Basisstil.

- **Das HTML ändert sich** von Theme zu Theme nicht: Geschwindigkeit, Barrierefreiheit, strukturierte Daten und [SEO](https://eclaircms.org/de/dokumentation/seo) bleiben gleich.
- **Nur das aktive Theme** wird zusammen mit dem übrigen CSS in die Seite eingefügt: keine zusätzliche Datei zum Herunterladen.
- **Der automatische Dunkelmodus** funktioniert mit jedem der 6 Themes.
- **Die Stile des Shops** werden nur eingefügt, wenn er geöffnet ist: Eine Website ohne Shop lädt sie nie.
- **Mit einer Art Direction** werden nur die Regeln eingefügt, die deine Richtung braucht, und ihre Titelschrift wird mit `font-display: optional` vorab geladen: keine Layoutverschiebungen, und Lighthouse bleibt bei 100.

## Wie fügst du dein eigenes CSS hinzu?

Um über das Theme hinauszugehen (die Farbe eines Buttons, Abstände, der Stil eines Blocks), füge deine Regeln unter **Einstellungen › Design › Eigenes CSS** ein und speichere.

- **Sie haben Vorrang vor dem Theme**: Sie werden auf jeder Seite nach ihm eingefügt.
- **Sie überstehen Updates** seit Éclair 1.5.0: Sie liegen zusammen mit deinen Daten in `data/`, und das [Update](https://eclaircms.org/de/dokumentation/updates) rührt diesen Ordner nicht an.
- **Die Markierungen für den Dunkelmodus** funktionieren: Regeln zwischen `/*dark*/` und `/*/dark*/` entfallen, wenn der Dunkelmodus auf „Immer hell“ steht.
- **Aus Sicherheitsgründen** werden das Zeichen `<`, `@import`-Regeln und Steuerzeichen entfernt, und das Feld nimmt maximal 64 KB auf.

Zum Beispiel für Buttons mit leicht abgerundeten Ecken und einen dunkleren Footer im Dunkelmodus:

```css
.btn { border-radius: 6px; }

/*dark*/@media (prefers-color-scheme: dark) { .site-footer { background: #0d0d12; } }/*/dark*/
```

## Was können die Éclair-Themes nicht?

- **Sie ändern nicht die Struktur der Seiten.** Um ein Element zu verschieben oder einen Bereich hinzuzufügen, musst du die PHP-Vorlagen in `app/theme/` anpassen, wie die Seite [Für Entwickler](https://eclaircms.org/de/dokumentation/entwickler) erklärt. Ein Update ersetzt sie: Bewahre eine Kopie deiner Dateien auf.
- **Es gibt weder einen Katalog zum Herunterladen noch Erweiterungen**: Die 6 Themes sind in Éclair enthalten. Dass es keine Erweiterungen gibt, ist Absicht, für Geschwindigkeit und Sicherheit.
- **Keine Webfonts mit den klassischen Themes**: nur Systemschriftarten, die schon auf dem Gerät des Besuchers vorhanden sind. Eine Art Direction fügt eine einzige Titelschrift hinzu, die deine Website selbst ausliefert.
- **Das eigene CSS importiert nichts**: Ohne `@import` kann es kein anderes Stylesheet laden.

## Was tun, wenn sich das Aussehen nicht ändert?

| Symptom | Lösung |
| --- | --- |
| Die Website hat sich nicht verändert | Die Vorschau speichert nichts: Klicke auf **Speichern**. Das CSS steckt in jeder Seite, es gibt keine alte Datei, die du aktualisieren müsstest. |
| „Der Shop“ und „Ein Produkt“ fehlen in der Vorschau | Sie erscheinen erst, wenn der Shop geöffnet ist, und „Ein Produkt“ nur mit einem veröffentlichten Produkt. |
| Eine Regel deines eigenen CSS wird ignoriert | Prüfe, ob sie weder `<` noch `@import` enthält: Beides wird beim Speichern entfernt. Bleibt sie wirkungslos, formuliere sie genauer: Eine spezifischere Regel des Themes hat Vorrang. |
| „Eigenes CSS zu lang: maximal 64 KB.“ | Fasse deine Regeln zusammen oder kürze sie. |
| Regeln verschwinden | Sie stehen zwischen `/*dark*/` und `/*/dark*/`, und der Dunkelmodus steht auf „Immer hell“: Das ist gewollt. |
| Deine Änderungen an `theme.css` sind weg | Das Update hat `app/` ersetzt. Verschiebe deine Regeln ins eigene CSS. |

Die ursprüngliche Anleitung steht auch im [offiziellen Éclair-Handbuch](https://github.com/Jacckisback/eclair-cms/blob/main/docs/GUIDE.de.md#themes), die Einzelheiten der Versionen 1.3.0 bis 1.5.0 im [Changelog](https://eclaircms.org/de/changelog).

## Fragen zu den Themes

### Verliere ich beim Wechsel des Themes meine Inhalte oder mein SEO?

Nein. Die Éclair-Themes berühren weder deine Inhalte noch das HTML deiner Seiten: Überschriften, strukturierte Daten, Geschwindigkeit und Barrierefreiheit bleiben gleich. Nur das Aussehen ändert sich.

### Kann ich zum ursprünglichen Theme zurückkehren?

Ja, jederzeit: Wähle unter Einstellungen › Design die Karte Éclair und speichere. Ihre empfohlenen Einstellungen werden wieder übernommen, und dein eigenes CSS bleibt bestehen.

### Funktioniert der Dunkelmodus mit allen Themes?

Ja: Er wird automatisch je nach Gerät des Besuchers angewendet, mit jedem der 6 Themes. Um ihn zu vermeiden, stelle den **Dunkelmodus** auf „Immer hell“.

### Welches Theme passt zum Online-Verkauf?

Das Theme Shop ist zum Verkaufen gemacht: quadratische Fotos, fixierter Header, markante Buttons. Die anderen Themes zeigen den Shop ebenfalls an; die Anleitung steht unter [Der schlanke Shop](https://eclaircms.org/de/dokumentation/shop).

### Übersteht mein eigenes CSS Updates?

Ja, seit Éclair 1.5.0: Es liegt in `data/`, und das Update rührt diesen Ordner nicht an. Ersetzt werden nur Änderungen, die du direkt in `app/theme/` gemacht hast.

### Macht eine Art Direction meine Website langsamer?

Nein. Nur die Regeln, die deine Richtung braucht, werden in die Seite eingefügt, und ihre Titelschrift von 12 bis 27 KB wird von deiner Website ausgeliefert und vorab geladen. Lighthouse bleibt in allen vier Kategorien bei 100.

### Kann ich nach der Wahl einer Art Direction zum klassischen Theme zurückkehren?

Ja: Wähle unter Einstellungen › Design die Option Klassisches Theme und speichere. Seine Einstellungen warten unverändert auf dich, und die deiner Richtung ebenso, falls du zu ihr zurückkehrst.