Tenant theming¶
Tenant theming gives each tenant its own visual identity without recompiling — useful for SaaS-style multi-tenant deployments and for customers who want the UI to look like their tool.
The settings are stored in the database, scoped per tenant, and applied on every page render via the TenantThemeStyle component. There is no per-tenant container or recompile.
What you can theme¶
- Logo — SVG or PNG, swapped into the top-left and the login wall.
- Favicon — accepted alongside the logo upload.
- Primary colour — applied to navigation accents, buttons, badges, the active-link bar.
- Accent colour — used on hover and focus rings.
- Login wall message — free-form Markdown shown on the OIDC login page (legal notice, support contact, MOTD).
- Product display name — overrides "Ampora" in the tab title and the top-left brand text.
- Dark mode preference —
auto(follow system),light(force),dark(force).
Where to set it¶
Settings → Tenant → Branding (Admin only).
Changes take effect immediately for every operator on that tenant; no restart is required. The change is recorded in the audit log with the before/after snapshot of the theme record.
Compatibility constraints¶
- Logos render with
max-height: 36pxin the top bar; SVG is preferred. - Primary colour must have an AA-contrast ratio against white and black backgrounds — the UI uses both. The settings UI shows a contrast-warning chip if you pick something that fails.
- Login wall Markdown is rendered with a strict allow-list of tags (paragraphs, links, lists, emphasis). No images, scripts, or arbitrary HTML.
Per-tenant CSS¶
Heavy theming (custom fonts, layout tweaks) is not in scope. Tenants do not control the layout, only the brand surfaces above. If you need per-tenant skinning beyond that, fork the Ampora.Web project and re-deploy.
Theming the OIDC login page¶
The Ampora-side login wall is shown before the redirect to the OIDC provider. The IdP's own login page is owned by the IdP — Ampora cannot theme it. For end-to-end-branded login flows configure the IdP to apply matching branding (Keycloak themes, Okta sign-in widget, Azure Entra branding) using the same logo and palette.
Where ADRs cover this¶
- ADR-037 – Tenant theming — the data model and rendering pipeline.
- ADR-019 – Design system — the underlying design tokens that themes vary.