Branding & Theming
Jede SKH-Organisation kann das Erscheinungsbild über Einstellungen → Theme Configuration anpassen. Die Konfiguration gilt pro Organisation und wirkt sich auf Sidebar, Login-Erfahrung und Changelog-Seite aus.
Was kann angepasst werden?
Marke
| Feld | Verwendung |
|---|---|
| Brand Name | Anzeigename in Sidebar-Footer, Browser-Titel und Login |
| Logo URL | Hauptlogo (in der Sidebar – grosses Format) |
| Favicon URL | Browser-Tab-Icon |
| Full App Logo | Logo für die Changelog-Seite und einige Vollbild-Bereiche |
Logo-URLs können entweder hochgeladene Assets in Ihrem Storage sein oder externe HTTPS-URLs. Bevorzugen Sie SVG für Logos – das skaliert auf jedem Display ohne Qualitätsverlust.
Light- & Dark-Theme
Für jedes Theme können Sie folgende Farben setzen:
- Primary Color – Buttons, Highlights, Akzent.
- Secondary Color – Sekundäre Buttons, Hover-States.
- Accent Color – Spezial-Akzente (z. B. Tags).
- Navigation Background – Sidebar-Hintergrund.
- Content Background – Hauptbereich-Hintergrund.
- Foreground Color – Standard-Textfarbe.
Beide Themes werden gespeichert. Mitglieder können in ihrem Profil → Theme zwischen Hell, Dunkel und System wechseln.
Theme-Preset
Im Feld Default-Theme legen Sie fest, mit welchem Theme neue Mitglieder starten – Hell oder Dunkel.
Wie konfigurieren?
- Einstellungen → Theme Configuration.
- Logo und Favicon hochladen (oder URLs einfügen).
- Brand-Name eintragen.
- Reiter Light-Theme und Dark-Theme durchgehen, Farben mit dem integrierten Color-Picker setzen.
- Live-Preview prüfen – die Vorschau aktualisiert sich, ohne das Setting für andere bereits zu speichern.
- Speichern.
Änderungen werden bei der nächsten Page-Navigation der Mitglieder sichtbar. Ein Hard-Reload kann nötig sein, wenn das Logo gecacht ist.
Empfehlungen für Farbwahl
- Kontrast – Vergewissern Sie sich, dass Text auf Hintergrund WCAG-AA-konform lesbar ist (Kontrast >= 4.5:1 bei normalem Text). Tools wie WebAIM Contrast Checker helfen.
- Marke vs. Lesbarkeit – Eine knallige Marken-Farbe kann als Primary funktionieren, aber als Foreground katastrophal sein. Behalten Sie Lesbarkeit als oberste Prio.
- Dark Theme – Dunkle Themes profitieren von leicht entsättigten Farben. Reine Markenfarben wirken oft zu intensiv.
- Konsistenz – Wenn Ihre Organisation einen Style-Guide hat: Hex-Werte einfach übernehmen.
Logo & Favicon Best Practices
| Asset | Empfohlene Grösse | Format |
|---|---|---|
| Logo (klein, Sidebar) | 96 × 96 px (1:1) oder 128 × 32 (4:1) | SVG, PNG mit Transparenz |
| Favicon | 32 × 32, 64 × 64 | ICO, PNG, SVG |
| Full App Logo | 400 × 80 oder 320 × 64 | SVG, PNG |
Halten Sie die Dateigrösse klein (< 100 KB), damit die App schnell lädt.
Troubleshooting
- Logo zeigt nicht an – HTTPS-URL prüfen; gemischte Inhalte (HTTP-Logo auf HTTPS-Seite) blockt der Browser.
- Falsche Farben – Cache leeren, Hard-Reload (Ctrl+F5).
- Dark-Mode-Logo unsichtbar – Verwenden Sie zwei separate Logo-Assets (eines für Light, eines für Dark) und speichern Sie sie als unterschiedliche Logo- bzw. Full-App-Logo-URLs.
- Favicon hat sich nicht aktualisiert – Browser cachen Favicons aggressiv. Im Inkognito-Modus testen.
Customisation jenseits der UI
Wenn Sie über die UI hinaus anpassen wollen (etwa eigene Schriftart, eigene CSS), wenden Sie sich an den Plattform-Support. Standardmässig erlaubt die Plattform keine Custom-CSS-Injektionen aus Sicherheits- und Wartbarkeitsgründen.