Design & Themes — Eigenes Theme erstellen: Handbuch

Florian bringt ein Theme-System mit, das weit mehr steuert als nur Farben: Ein Theme legt die komplette Gestalt der Oberfläche fest — Farbwelt, Eckenrundungen, Schatten, Schriften, Informationsdichte und die Optik der Seitenleiste. Sie wählen entweder eines der fünf mitgelieferten Themes oder erstellen ein eigenes Theme als JSON-Datei und laden es hoch.

Hinweis: Das aktive Theme gilt für die Benutzer Ihrer Wehr; es ist keine persönliche Einstellung. Unter Design (/einstellungen/design) benötigen Sie dafür das Recht Design verwalten (Design.Manage). Branding besitzt ein eigenes Bearbeitungsrecht.

Wehr-Name, Stammdaten und Logo

Unter Branding (/einstellungen/branding) bearbeiten Sie den Namen, Bundesland und Anschrift sowie das Logo Ihrer Wehr. Dafür benötigen Sie das Recht Branding verwalten (Branding.Manage). Name, Stammdaten, Logo hochladen und Logo entfernen sind getrennte Aktionen. Ein leeres Namensfeld setzt den Namen auf „Florian“ zurück; ohne verfügbares eigenes Logo erscheint das Standardlogo.

Florian prüft vor jeder Änderung erneut, ob Ihr Benutzerkonto aktiv und das Bearbeitungsrecht noch vorhanden ist. Wird eine bereits geöffnete Seite nach einem Rechteentzug weiterverwendet, wird die Änderung abgelehnt. Ihr Entwurf bleibt dabei erhalten; eine Erfolgsmeldung erscheint erst bei erfolgreicher Verarbeitung. Das Recht auf einer bereits geöffneten Seite ersetzt die erneute Prüfung beim Speichern nicht.

Logos werden getrennt je Wehr gespeichert. Unterstützt werden PNG, JPEG, WebP und SVG; der Dateiinhalt muss zum angegebenen Format passen. Auf einer Anmeldeseite ohne zugeordnete Wehr verwendet Florian die festgelegte Standard-Wehr für die Branding-Anzeige.

Bei einem Update von einem älteren Stand: Frühere gemeinsam gespeicherte Logo-Dateien können keiner Wehr zuverlässig zugeordnet werden und werden deshalb nicht automatisch übernommen oder angezeigt. Laden Sie das richtige Logo unter Branding für die jeweilige Wehr erneut hoch. Bis dahin wird das Standardlogo verwendet. Namen und Stammdaten bleiben erhalten; die alten gemeinsamen Dateien werden durch Hochladen oder Entfernen eines Logos nicht gelöscht. Diese Umstellung ist Bestandteil des hier beschriebenen Entwicklungsstands; der Ausrollstatus steht im jeweiligen Freigabebericht.

Was ein Theme umfasst

Ein Theme besteht aus zwei Bausteinen:

Design-Tokens — benannte Gestaltungswerte (z. B. --brand für die Primärfarbe oder --r-card für die Kartenrundung). Jedes Token hat eine feste Bedeutung und einen erlaubten Wertebereich; die vollständige Liste finden Sie weiter unten.
Layout-Optionen — drei feste Auswahlschalter, die grobe Weichen stellen:

Option	Werte	Wirkung
Dichte (`density`)	`comfortable` · `compact`	comfortable ist die heutige, luftige Darstellung. compact verkleinert die Grundschrift, verringert die Höhe von Eingabefeldern und Tabellenzeilen und strafft Abstände — mehr Daten pro Bildschirm.
Seitenleiste (`sidebar`)	`dark` · `light` · `brand`	Voreinstellung für die Optik der Seitenleiste: nahezu schwarz, hell (Papierfläche) oder in der Markenfarbe getönt. Setzt Ihr Theme eigene `--sidebar-*`-Tokens, haben diese Vorrang vor der Voreinstellung.
Ecken (`corners`)	`sharp` · `soft` · `round`	Grobe Vorgabe der Eckenrundungen: kantig, weich (heutiger Stand) oder stark gerundet. Eigene `--r-*`-Tokens im Theme haben auch hier Vorrang.

Dazu kommt der Modus (mode): Ein Theme legt sich auf light oder dark fest. Nur das Standard-Theme Klassisch Rot ist adaptiv und behält den gewohnten Hell/Dunkel-Umschalter; bei allen anderen Themes bestimmt das Theme den Modus, und der Umschalter entfällt.

Die fünf mitgelieferten Themes

Theme	Modus	Charakter
Klassisch Rot (`klassisch-rot`)	adaptiv	Der vertraute Look inklusive Hell/Dunkel-Umschalter; außerdem die sichere Rückfallebene, wenn ein gespeichertes aktives Theme nicht mehr aufgelöst werden kann.
Leitstand (`leitstand`)	dunkel	Dunkles, kompaktes Kontrollraum-Design mit kantigen Ecken: dunkle Flächen, kräftige Signalfarben, hohe Informationsdichte. Gedacht für Wandmonitore und Dauerbetrieb im Gerätehaus.
Hell Modern (`hell-modern`)	hell	Luftig und freundlich: viel Weiß, große Rundungen, helle Seitenleiste, weiche Schatten. Ein moderner, aufgeräumter Look für den Verwaltungsalltag.
Hochkontrast (`hochkontrast`)	hell	Barrierefreies Theme mit sehr hohen Kontrasten (WCAG-AAA-Textpaarungen), schwarzen Linien statt weicher Schatten, kräftigem blauem Fokusring und der besonders gut lesbaren Schrift Atkinson Hyperlegible.
Kompakt Daten (`kompakt-daten`)	hell	Voreinstellung ohne ausdrückliche Theme-Auswahl sowie nach Löschen des aktiven eigenen Themes: kompakte Dichte, kleine Radien, dezente Farben, eine Schriftfamilie.

Die mitgelieferten Themes sind fest eingebaut und unveränderlich. Sie eignen sich aber als Basis für eigene Themes (siehe base im Dateiformat) und lassen sich als JSON exportieren, um sie als Vorlage zu studieren.

Theme wechseln (in der App)

Öffnen Sie die Einstellungsseite Design.
Die Theme-Auswahl zeigt für jedes verfügbare Theme eine Vorschaukarte mit den prägenden Farben (Marke, Fläche, Text).
Wählen Sie bei der gewünschten Karte Aktivieren. Die Seite wird neu geladen und verwendet das aktive Theme Ihrer Wehr. Eine sofortige Aktualisierung aller bereits geöffneten Sitzungen anderer Benutzer wird damit nicht zugesagt.

Vor Aktivieren, Löschen, Speichern eines Entwurfs und Datei-Upload prüft Florian das aktive Benutzerkonto und Design.Manage erneut. Nach Rechteentzug wird eine bereits geöffnete Aktion abgelehnt; gespeicherte Themes und die aktive Auswahl bleiben dabei unverändert. Ein Entwurf bleibt erhalten. Fehlermeldungen erscheinen bei der jeweiligen Aktion. Während eine Aktion läuft, nimmt dieselbe geöffnete Design-Seite keine weitere Aktion an.

Hinweis: Ist ein Theme mit festem Modus aktiv (alle außer Klassisch Rot), ist der bisherige Umschalter Automatisch / Hell / Dunkel ohne Funktion beziehungsweise ausgeblendet — der Modus gehört dann dem Theme. Zurück zum adaptiven Verhalten kommen Sie jederzeit, indem Sie wieder Klassisch Rot wählen.

Das Theme-Dateiformat (JSON)

Ein eigenes Theme ist eine einzelne JSON-Datei nach dem Schema florian.theme/v1:

{
  "schema": "florian.theme/v1",
  "name": "Nachtwache",
  "slug": "nachtwache",
  "base": "leitstand",
  "mode": "dark",
  "layout": { "density": "compact", "sidebar": "dark", "corners": "sharp" },
  "tokens": {
    "--brand": "#FF5A4D",
    "--paper": "#0B0E12",
    "--r-card": "6px",
    "--font-sans": "inter"
  }
}

Die Felder im Einzelnen:

Feld	Pflicht	Bedeutung
`schema`	✔	Immer exakt `"florian.theme/v1"`. Andere Werte werden abgelehnt.
`name`	✔	Anzeigename (1–48 Zeichen; Buchstaben, Ziffern, Leerzeichen, `-`, `_`). Erscheint in der Theme-Auswahl.
`slug`	✔	Technischer Kurzname: nur Kleinbuchstaben `a–z`, Ziffern und Bindestriche, beginnt und endet mit Buchstabe oder Ziffer, maximal 40 Zeichen (z. B. `nachtwache`). Darf nicht mit einem eingebauten Slug kollidieren — sonst wird beim Hochladen automatisch ein Suffix wie `-1` angehängt oder die Datei abgelehnt.
`base`	–	Optionaler Slug eines eingebauten Themes als Ausgangspunkt (z. B. `"leitstand"`). Ihr Theme übernimmt dann alle Tokens der Basis und überschreibt nur die in `tokens` genannten Werte — so bleiben eigene Themes klein. Ohne `base` gelten die Standardwerte von Klassisch Rot als Ausgangspunkt.
`mode`	✔	`"light"` oder `"dark"`. Legt den Modus fest, in dem das Theme läuft.
`layout`	✔	Objekt mit den drei Layout-Optionen `density`, `sidebar`, `corners` (Werte siehe oben). Fehlt ein Schlüssel, gilt sein Standard (`comfortable` / `dark` / `soft`).
`tokens`	✔	Objekt mit Design-Tokens. Nur die unten aufgeführten Token-Namen sind zulässig; unbekannte Namen führen zur Ablehnung der gesamten Datei. Ein leeres Objekt `{}` ist nur erlaubt, wenn `base` gesetzt ist.

Achtung: Die Datei darf höchstens 32 KB groß sein. Beim Hochladen wird sie vollständig geprüft; schon ein einziger ungültiger Wert lehnt die gesamte Datei ab (mit einer verständlichen deutschen Fehlermeldung) — es wird nie ein Theme „teilweise" übernommen. Das schützt Ihre Installation: Ein Theme kann ausschließlich die freigegebenen Gestaltungswerte setzen, niemals eigene Stylesheets, Skripte oder externe Inhalte einschleusen.

Alle Design-Tokens im Überblick

Tokens mit Pflicht ✔ müssen in einem vollständigen Theme vorhanden sein — entweder direkt in tokens oder geerbt über base. Optionale Tokens fallen auf sinnvolle Standardwerte zurück.

Erlaubte Wertformate

Typ	Erlaubte Werte
Farbe	Hex-Notation `#RGB`, `#RRGGBB` oder `#RRGGBBAA` — oder die Funktionsschreibweisen `rgb()`, `rgba()`, `hsl()`, `hsla()` mit Zahlenwerten (z. B. `rgba(234,242,246,.80)`). Nichts anderes; insbesondere keine Farbnamen, kein `var()`, keine `url()`.
Länge	Zahl mit Einheit `px`, `rem` oder `em` (oder `0`), z. B. `6px` oder `0.5rem`. Je Token gilt ein zulässiger Bereich (siehe Radien). Werte außerhalb des Bereichs werden abgelehnt.
Schriftschlüssel	Genau einer der festen Schlüssel: `inter`, `space-grotesk`, `system`, `atkinson`, `mono`. Jeder Schlüssel steht für einen fest hinterlegten, selbst gehosteten Schrift-Stack — freie Schriftnamen sind nicht möglich (DSGVO: keine externen Font-Dienste).
Schatten	Ein `box-shadow`-Wert aus höchstens 4 Ebenen (durch Kommas getrennt). Jede Ebene: optional `inset`, zwei bis vier Pixelmaße, dann eine Farbe in Hex- oder `rgb()`/`rgba()`-Notation, z. B. `0 4px 12px rgba(0,0,0,.55)`.

Marke & Akzent (Typ: Farbe)

Token	Pflicht	Bedeutung
`--brand`	✔	Primärfarbe der Marke — Buttons, aktive Elemente, Hervorhebungen.
`--brand-dark`	✔	Dunklere Variante der Primärfarbe für Hover- und Gedrückt-Zustände.
`--brand-ember`	✔	Warme Zweitakzent-Farbe (z. B. für Hinweise und Akzente).
`--brand-tint`	–	Sehr blasse Markenfläche für dezente Hintergründe.
`--focus`	✔	Farbe des Fokusrings bei Tastaturbedienung.

Text, Flächen & Linien (Typ: Farbe)

Token	Pflicht	Bedeutung
`--ink`	✔	Haupttextfarbe.
`--ink-soft`	✔	Abgeschwächte Textfarbe für Sekundärtext.
`--ink-faint`	✔	Sehr dezente Textfarbe für Hilfstext und Beschriftungen.
`--paper`	✔	Grundfläche der Seite.
`--paper-2`	✔	Zweite Flächenstufe (z. B. Bereichs-Hintergründe).
`--paper-3`	✔	Dritte Flächenstufe (z. B. Karten).
`--line`	✔	Standard-Linien- und Rahmenfarbe.
`--line-strong`	✔	Kräftigere Linienfarbe für Betonung.

Semantische Farben (Typ: Farbe)

Token	Pflicht	Bedeutung
`--ok`	✔	Erfolg / in Ordnung.
`--warn`	✔	Warnung.
`--err`	✔	Fehler / kritisch.
`--info`	✔	Information.
`--ok-bg`, `--ok-line`	–	Hintergrund- und Linienfarbe für Erfolgs-Flächen (z. B. Meldungsboxen).
`--warn-bg`, `--warn-line`	–	Hintergrund- und Linienfarbe für Warn-Flächen.
`--err-bg`, `--err-line`	–	Hintergrund- und Linienfarbe für Fehler-Flächen.
`--info-bg`, `--info-line`	–	Hintergrund- und Linienfarbe für Info-Flächen.

Fehlen die optionalen Flächen-Tokens, leitet Florian passende Werte aus den Basisfarben ab.

Seitenleiste (Typ: Farbe)

Token	Pflicht	Bedeutung
`--sidebar-bg`	✔	Hintergrund der Seitenleiste.
`--sidebar-bg-2`	✔	Zweite Flächenstufe der Seitenleiste (z. B. aktiver Bereich, Kopf).
`--sidebar-fg`	✔	Haupttextfarbe in der Seitenleiste.
`--sidebar-link`	✔	Farbe der Navigationslinks.
`--sidebar-muted`	✔	Gedämpfte Textfarbe (Gruppenüberschriften, Nebentext).
`--sidebar-line`	✔	Trennlinien in der Seitenleiste.
`--sidebar-active`	✔	Markierung des aktiven Navigationspunkts.

Hinweis: Die Layout-Option sidebar (dark/light/brand) füllt diese sieben Tokens bereits mit einer stimmigen Voreinstellung. Eigene --sidebar-*-Werte im Theme überschreiben die Voreinstellung gezielt — Sie müssen also nicht alle sieben setzen, wenn Ihnen die Voreinstellung fast passt.

Radien (Typ: Länge)

Token	Pflicht	Bereich	Bedeutung
`--r-input`	✔	0–32 px	Rundung von Eingabefeldern und Buttons.
`--r-card`	✔	0–32 px	Rundung von Karten und Panels.
`--r-sm`	✔	0–24 px	Kleine Rundung (Badges, kleine Elemente).
`--r-lg`	✔	0–40 px	Große Rundung (große Container, Dialoge).
`--r-pill`	–	0–9999 px	Pillenform (voll gerundete Elemente); üblich ist `999px`.

Schatten (Typ: Schatten, alle optional)

Token	Bedeutung
`--sh-1`	Flache Erhebung (z. B. Eingabefelder, kleine Karten).
`--sh-2`	Mittlere Erhebung (z. B. Dropdowns, Karten).
`--sh-3`	Starke Erhebung (z. B. Dialoge, Overlays).
`--sh-focus`	Fokus-Schatten (Ring um das fokussierte Element).

Schriften (Typ: Schriftschlüssel)

Token	Pflicht	Bedeutung
`--font-sans`	✔	Grundschrift für Fließtext und Bedienelemente.
`--font-display`	✔	Schrift für Überschriften und Zahlen-Displays.

Verfügbare Schlüssel und ihr Charakter:

Schlüssel	Charakter
`inter`	Neutrale, sehr gut lesbare Standard-Sans.
`space-grotesk`	Markante Display-Schrift mit technischem Charakter.
`system`	Die Systemschrift des jeweiligen Betriebssystems.
`atkinson`	Atkinson Hyperlegible — auf maximale Lesbarkeit optimiert, ideal für barrierefreie Themes.
`mono`	Monospace-Stack (u. a. Cascadia Mono) für einen technischen Daten-Look.

Vollständiges Beispiel: das Theme „Nachtwache"

Ein komplettes, hochladbares Theme ohne base, das jeden Pflicht-Token selbst setzt — ein dunkles Wach-Design mit gedecktem Rot und kompakter Darstellung:

{
  "schema": "florian.theme/v1",
  "name": "Nachtwache",
  "slug": "nachtwache",
  "mode": "dark",
  "layout": { "density": "compact", "sidebar": "dark", "corners": "sharp" },
  "tokens": {
    "--brand": "#FF5A4D",
    "--brand-dark": "#E0483F",
    "--brand-ember": "#F5B301",
    "--brand-tint": "#241A18",
    "--focus": "#FF5A4D",
    "--ink": "#EAF2F6",
    "--ink-soft": "#A9B4BE",
    "--ink-faint": "#6E7A85",
    "--paper": "#0B0E12",
    "--paper-2": "#12161C",
    "--paper-3": "#181D24",
    "--line": "#242B33",
    "--line-strong": "#323A44",
    "--ok": "#3ECF7E",
    "--warn": "#F5B301",
    "--err": "#FF5A4D",
    "--info": "#4FC3E0",
    "--ok-bg": "#0E2418",
    "--ok-line": "#1E3D2B",
    "--warn-bg": "#2A2210",
    "--warn-line": "#463A18",
    "--err-bg": "#2A1513",
    "--err-line": "#4A241F",
    "--info-bg": "#0E2630",
    "--info-line": "#1F3E4C",
    "--sidebar-bg": "#070A0D",
    "--sidebar-bg-2": "#12161C",
    "--sidebar-fg": "#EAF2F6",
    "--sidebar-link": "rgba(234,242,246,.80)",
    "--sidebar-muted": "rgba(234,242,246,.55)",
    "--sidebar-line": "rgba(234,242,246,.08)",
    "--sidebar-active": "#FF5A4D",
    "--r-input": "4px",
    "--r-card": "6px",
    "--r-sm": "3px",
    "--r-lg": "8px",
    "--r-pill": "999px",
    "--sh-1": "0 1px 2px rgba(0,0,0,.5)",
    "--sh-2": "0 4px 12px rgba(0,0,0,.55)",
    "--sh-3": "0 12px 32px rgba(0,0,0,.6)",
    "--sh-focus": "0 0 0 3px rgba(255,90,77,.34)",
    "--font-sans": "inter",
    "--font-display": "space-grotesk"
  }
}

Kürzer geht es mit base: Wollen Sie nur einzelne Werte eines eingebauten Themes ändern, genügt das kleine Beispiel aus dem Abschnitt Dateiformat — dort erbt „Nachtwache" alles von Leitstand und überschreibt nur vier Tokens.

Hinweis: Prüfen Sie bei eigenen Farbkombinationen den Kontrast: Text auf Fläche sollte mindestens ein Kontrastverhältnis von 4,5:1 erreichen (WCAG AA), für barrierefreie Themes 7:1 (AAA). Das Theme Hochkontrast zeigt, wie das aussieht.

Theme hochladen, exportieren und löschen

Alles auf der Einstellungsseite Design:

Hochladen: Wählen Sie Theme hochladen und geben Sie die .json-Datei an. Florian prüft die Datei vollständig (Schema, Feldregeln, jeder einzelne Token-Wert). Bei Fehlern erhalten Sie eine deutsche Fehlermeldung, und nichts wird übernommen. Bei Erfolg erscheint das Theme in der Auswahl und kann aktiviert werden.
Exportieren: Jedes Theme — eingebaut oder eigen — lässt sich als JSON-Datei herunterladen (florian-theme-<slug>.json). So sichern Sie eigene Themes, geben sie an andere Feuerwehren weiter oder nutzen ein eingebautes Theme als Startpunkt: exportieren, anpassen, unter neuem name/slug wieder hochladen.
Löschen: Eigene Themes können Sie wieder entfernen. War das gelöschte Theme gerade aktiv, wechselt Florian automatisch zurück auf Kompakt Daten. Eingebaute Themes lassen sich nicht löschen.

Hinweis: Pro Wehr sind bis zu 20 eigene Themes speicherbar. Ein erneuter Upload mit bereits vorhandenem eigenen Slug kann einen freien Zusatz -1 erhalten; er zählt als weiteres Theme und benötigt ebenfalls einen freien Platz. Ist auch dieser Slug belegt, wird der Upload abgelehnt. Hochgeladene Themes liegen in der Florian-Datenbank und sind damit Teil einer Datenbanksicherung.

Empfohlener Ablauf für ein eigenes Theme

Wählen Sie das eingebaute Theme, das Ihrem Ziel am nächsten kommt, und exportieren Sie es als Vorlage.
Passen Sie in der JSON-Datei name, slug und die gewünschten Tokens an — oder starten Sie schlank mit base und nur den abweichenden Werten.
Laden Sie die Datei hoch und korrigieren Sie eventuelle Validierungsfehler anhand der Meldungen.
Aktivieren Sie das Theme und prüfen Sie die wichtigsten Ansichten (Tabellen, Formulare, Meldungsboxen) auf Lesbarkeit und Kontrast.
Exportieren Sie den finalen Stand als Sicherung.

Siehe auch

Der Setup-Assistent — Grundeinrichtung der Installation, in deren Umfeld auch Branding und Design gepflegt werden.
Benutzer, Rollen & Rechte — wer die Design-Einstellungen ändern darf.
Backup & Wiederherstellung — eigene Themes sind Teil der Datenbank und damit des Backups.