Themes verstehen
easyWebsite bietet vier Themes, die das visuelle Erscheinungsbild der gesamten Webseite bestimmen. Diese Seite erklärt die Unterschiede, die technische Umsetzung und die Entscheidungskriterien.
Die vier Themes
kernux (Standard)
Das KERN-UX-Theme implementiert den offenen, modularen UX-Standard für die digitale Verwaltung. Es ist das Standard-Theme und eignet sich für alle Projekte ohne spezifische Branding-Vorgaben.
bund
Das Bundes-Theme setzt die Designvorgaben des Bundes um. Es verwendet die Schriftart Bundes Sans, scharfe Ecken (kein Border-Radius) und ein dunkles Blau als Primärfarbe. Geeignet für Bundesbehörden und -institutionen.
opencode
Das openCode-Theme orientiert sich am Erscheinungsbild der openCode-Plattform. Es verwendet Open Sans als Fließtext-Schrift und Space Grotesk als Display-Schrift, ein kräftiges Blau als Primärfarbe und eigene Sidebar- und Link-Stile.
opendesk
Das openDesk-Theme basiert technisch auf dem openCode-Theme und überschreibt lediglich die Primärfarbe (Lila) und die Sidebar-Akzentfarbe. Es ist für Projekte im openDesk-Kontext gedacht.
Wann welches Theme?
| Kontext | Theme |
|---|---|
| Allgemeine Verwaltungsdokumentation | kernux |
| Bundesbehörde / Bundesinstitution | bund |
| openCode-Ökosystem | opencode |
| openDesk-Ökosystem | opendesk |
| Kein spezifisches Branding | kernux |
Technische Umsetzung
Die Themes bauen auf dem CSS-Variablen-System auf, das in Design & Komponentensystem beschrieben ist. Theme-Dateien wie bund.css und opencode.css überschreiben die CSS-Variablen der Theme Bridge mit theme-spezifischen Werten.
Was sich zwischen Themes unterscheidet
| Eigenschaft | kernux | bund | opencode | opendesk |
|---|---|---|---|---|
| Primärfarbe | KERN-Standard | Dunkelblau | Kräftig-Blau (#1544ff) | Lila (#571efa) |
| Border-Radius | Standard | 0px (scharfe Ecken) | Standard | Standard |
| Fließtext-Schrift | System | Bundes Sans | Open Sans | Open Sans |
| Display-Schrift | System | Bundes Sans | Space Grotesk | Space Grotesk |
| Sidebar-Akzent | Standard | Standard | Hellblau (#e9edff) | Helllila (#ece7fe) |
Dark Mode
Alle Themes unterstützen Dark Mode über das Attribut data-kern-theme="dark". Die Theme-Dateien definieren eigene Farbwerte für den dunklen Modus.
Eigene Anpassungen
Im Developer Mode können CSS-Variablen in einem eigenen Stylesheet überschrieben werden:
Das ist möglich, weil Schicht 3 (die Theme-Datei) auf Schicht 1 (die Bridge) aufbaut. Eigene Overrides können nach dem Theme-Import gesetzt werden und überschreiben die Theme-Werte.