Branding & Theming¶

The borrower portal supports per-tenant branding, allowing each tenant to customize the portal's appearance with their own colors and logo.

Branding Configuration¶

Branding data is fetched from the public (unauthenticated) endpoint:

GET /api/v1/portal/config

{
  "tenant_name": "Acme Lending",
  "logo_url": "https://cdn.acmelending.com/logo.png",
  "primary_color": "#1976d2",
  "secondary_color": "#dc004e",
  "support_email": "support@acmelending.com",
  "support_phone": "+18005551234"
}

This endpoint uses AllowAny permission so branding is available on the login page before authentication.

`useBranding()` Hook¶

The useBranding() hook fetches and caches branding configuration:

const { data: branding } = useBranding();

Configuration:

Query key: ["portal", "branding"]
Stale time: 5 minutes (branding changes infrequently)
Placeholder data: Default branding values used before the API responds

Default branding values:

Field	Default
`tenant_name`	`"Loan Portal"`
`primary_color`	`"#1976d2"` (MUI blue)
`secondary_color`	`"#dc004e"` (MUI pink)
`logo_url`	`null`
`support_email`	`null`
`support_phone`	`null`

Dynamic Theme Creation¶

The App.tsx component creates an MUI theme from branding data:

function App() {
  const { data: branding } = useBranding();

  const theme = useMemo(
    () => createPortalTheme(branding),
    [branding],
  );

  return (
    <ThemeProvider theme={theme}>
      {/* ... */}
    </ThemeProvider>
  );
}

The theme applies branding colors to:

Element	Source
Primary color (buttons, links, AppBar)	`branding.primary_color`
Secondary color (accents)	`branding.secondary_color`

Branding Usage¶

AuthLayout¶

The login page displays:

Tenant logo (if logo_url is set) or tenant name as a heading
Centered card with the login form

PortalLayout¶

The main layout uses branding in:

AppBar: Tenant logo or name on the left
Sidebar: Tenant name as header (if no logo)

Configuring Branding¶

Branding is configured on the Tenant model in the backend. The portal config endpoint reads from the tenant's settings to provide branding data.

Fields available for customization:

Field	Description
`name`	Tenant display name
`logo_url`	URL to tenant logo image
`primary_color`	Primary brand color (hex)
`secondary_color`	Secondary brand color (hex)
`support_email`	Support email displayed in portal
`support_phone`	Support phone displayed in portal