Branding & Theming
Every SKH organisation can customise its appearance under Settings → Theme Configuration. The configuration applies per organisation and changes the sidebar, login experience and changelog page.
What can be customised?
Brand
| Field | Used for |
|---|---|
| Brand Name | Display name in sidebar footer, browser title and login |
| Logo URL | Main logo (in the sidebar – large format) |
| Favicon URL | Browser-tab icon |
| Full app logo | Logo for the changelog page and some full-screen areas |
Logo URLs can be either uploaded assets in your storage or external HTTPS URLs. Prefer SVG for logos – it scales on any display without quality loss.
Light & dark themes
For each theme you can set the following colours:
- Primary – Buttons, highlights, accent.
- Secondary – Secondary buttons, hover states.
- Accent – Special accents (e.g. tags).
- Navigation background – Sidebar background.
- Content background – Main area background.
- Foreground – Default text colour.
Both themes are saved. Members can switch in their Profile → Theme between Light, Dark and System.
Default theme
In the Default theme field you choose which theme new members start with – Light or Dark.
How to configure
- Settings → Theme Configuration.
- Upload logo and favicon (or paste URLs).
- Enter the brand name.
- Walk through the Light theme and Dark theme tabs and set colours via the colour picker.
- Check the live preview – the preview updates without saving the setting for everyone else yet.
- Save.
Changes apply on the next page navigation for members. A hard reload may be needed if the logo is cached.
Recommendations for colour choice
- Contrast – Make sure text on background is WCAG-AA readable (>= 4.5:1 for normal text). Tools like the WebAIM Contrast Checker help.
- Brand vs readability – A bold brand colour can work as primary, but be disastrous as foreground. Keep readability the top priority.
- Dark theme – Dark themes benefit from slightly desaturated colours. Pure brand colours often look too intense.
- Consistency – If your organisation has a style guide, use the hex values directly.
Logo & favicon best practices
| Asset | Recommended size | Format |
|---|---|---|
| Logo (small, sidebar) | 96 × 96 px (1:1) or 128 × 32 (4:1) | SVG, PNG with transparency |
| Favicon | 32 × 32, 64 × 64 | ICO, PNG, SVG |
| Full app logo | 400 × 80 or 320 × 64 | SVG, PNG |
Keep file size small (< 100 KB) so the app loads fast.
Troubleshooting
- Logo doesn't show – Confirm HTTPS URL; mixed content (HTTP logo on HTTPS page) is blocked by the browser.
- Wrong colours – Clear cache, hard reload (Ctrl+F5).
- Dark-mode logo invisible – Use two separate logo assets (one for light, one for dark) and save them as different logo / full-app-logo URLs.
- Favicon hasn't updated – Browsers cache favicons aggressively. Test in incognito.
Customisation beyond the UI
If you need to go beyond the UI (own font, own CSS), contact platform support. By default the platform does not allow custom CSS injection for security and maintainability reasons.