CMS-Themes: Dark Mode, geprüfte Barrierefreiheit

· Themes
Ein Screenshot des Tabs Themes im AliothPress Admin Panel.

AliothPress bringt 15 integrierte Themes mit, jedes mit Dunkel- und Hellmodus, und erreicht in den Barrierefreiheits-Audits von Google PageSpeed Insights 100/100 über alle 15 in beiden Modi. Besucher wechseln den Modus mit einem Klick, der Website-Betreiber legt den Standard fest oder sperrt einen einzelnen Modus, und ein Feld für Eigenes CSS passt jedes Theme an, ohne dessen Dateien anzufassen. Eigene Themes installieren sich aus einem ZIP-Archiv und überleben Core-Updates, während integrierte Themes von Updates wiederhergestellt werden und nie verloren gehen können.

15 integrierte Themes

Die integrierte Sammlung reicht von Corporate- über Editorial-, Botanik- und Kosmos- bis zu Neon-Ästhetik: Stellar Origin (der Standard), Corporate Clean, Editorial Press, Amber Blossom, Crimson Velvet, Emerald Forest, Frozen Moss, Handmade Story, Midnight Botanist, Nebula Rose, Neon Launch, Ocean Whispers, Oceanic Depth, Solar Flare und Volcanic Ash. Der Wechsel ist ein Klick im Admin-Panel und greift sofort auf der ganzen öffentlichen Website, Page-Builder-Seiten eingeschlossen: Builder-Blöcke werden mit den Design-Tokens des aktiven Themes gerendert, ein Theme-Wechsel gestaltet also alles auf einmal um.

Dunkel- und Hellmodus auf jedem Theme

Jedes Theme definiert eine vollständige dunkle und helle Palette. Ein Sonne-und-Mond-Umschalter im Header der Website lässt jeden Besucher einen Modus wählen, und die Wahl bleibt im Browser gespeichert. Der Betreiber steuert das Standardverhalten: der Systemeinstellung des Besuchers folgen, hell starten, dunkel starten oder die Website auf einen einzelnen Modus sperren, was den Umschalter ganz ausblendet. Ändert der Betreiber die Theme-Einstellungen, werden gespeicherte Besucherpräferenzen sauber zurückgesetzt, niemand bleibt also auf einer veralteten Wahl sitzen.

Geprüfte Barrierefreiheit

Alle 15 Themes erreichen 100/100 im Barrierefreiheits-Audit von Google PageSpeed Insights, im Dunkelmodus und im Hellmodus. Der Wert ruht auf der Bauweise des Markups:

  • Durchgehend semantisches HTML: Navigations-Landmarks, ARIA-Labels an interaktiven Bedienelementen, Nur-Screenreader-Text, wo Icons allein stehen.
  • Akkordeons nutzen das native details-Element und funktionieren mit Tastatur und Assistenztechnik ohne JavaScript.
  • Slideshows reagieren auf Pfeiltasten, und bewegte Elemente wie Slideshows und Logo-Ticker respektieren die prefers-reduced-motion-Einstellung des Besuchers.
  • Die Farbpaletten beider Modi sind auf ausreichenden Kontrast gebaut.

Barrierefreiheit ist hier eine Eigenschaft der gerenderten Seiten, geprüft pro Theme und pro Modus.

Eigenes CSS über dem aktiven Theme

Ein Feld für Eigenes CSS in den Design-Einstellungen nimmt deine eigenen Regeln auf, angewendet über dem aktiven Theme. Passe Farben, Abstände oder Typografie an, ohne Theme-Dateien zu bearbeiten. Die Anpassung übersteht so Theme-Wechsel und Core-Updates. Zwei Sicherheitsregeln gelten: url() und @import werden abgewiesen, eigene Styles können also keine externen Ressourcen laden, was den selbst gehosteten Charakter der öffentlichen Website ohne Drittanbieter bewahrt. Und die Ausgabe wird vor dem Rendern gegen Style-Tag-Ausbrüche bereinigt.

Eigene Themes aus einem ZIP

Über die integrierte Sammlung hinaus installiert AliothPress eigene Themes aus einem im Admin-Panel hochgeladenen ZIP-Archiv. Ein eigenes Theme ist ein vollwertiger Bürger: Es erscheint in der Theme-Liste, unterstützt beide Farbmodi und überlebt Core-Updates. Integrierte Themes sind anders geschützt: Ein Core-Update stellt ihre Dateien wieder her, sie können also weder verloren noch versehentlich beschädigt werden. Wie du ein eigenes Theme baust, behandelt ein separater Leitfaden zum Erstellen von AliothPress-Themes.

Die wichtigsten Fakten zu AliothPress-Themes und Barrierefreiheit

15 integrierte Themes mit vollständigen Dunkel- und Hellpaletten, ein Umschalter für Besucher mit betreiberseitigem Standard und Sperre, 100/100 PageSpeed-Barrierefreiheit über alle Themes in beiden Modi, prefers-reduced-motion- und Tastatur-Unterstützung in interaktiven Blöcken, ein bereinigtes Feld für Eigenes CSS, das keine externen Ressourcen laden kann, und Theme-Installation aus ZIP mit update-sicherem Verhalten auf beiden Seiten.

Häufig gestellte Fragen

Wie viele Themes bringt AliothPress mit?
15 integrierte Themes, jedes mit vollständiger Dunkel- und Hellmodus-Palette. Das Standard-Theme ist Stellar Origin, und ein Wechsel greift sofort auf der ganzen Website, Page-Builder-Seiten eingeschlossen.
Können Besucher zwischen Dunkel- und Hellmodus wählen?
Ja, über einen Umschalter im Header der Website, die Wahl wird im Browser gespeichert. Der Betreiber setzt den Standard (System, Hell oder Dunkel) oder sperrt einen Modus, was den Umschalter ausblendet.
Sind die AliothPress-Themes barrierefrei?
Ja. Alle 15 Themes erreichen 100/100 im Barrierefreiheits-Audit von Google PageSpeed Insights in beiden Modi, mit semantischem Markup, Tastatur-Unterstützung und prefers-reduced-motion-Handhabung.
Lässt sich ein Theme anpassen, ohne seine Dateien zu bearbeiten?
Ja. Das Feld Eigenes CSS legt deine Regeln über das aktive Theme und übersteht Theme-Wechsel und Updates. Externe Ressourcen über url() oder @import werden bewusst abgewiesen.
Kann ich mein eigenes Theme installieren?
Ja, aus einem ZIP-Archiv im Admin-Panel. Eigene Themes unterstützen beide Farbmodi und überleben Core-Updates. Ein separater Leitfaden erklärt, wie du eines baust.
CMS CMS features CMS themes