Branding

Learn how to customize the look your Pangolin dashboard and login pages with custom branding

Branding is only available in Enterprise Edition.

Pangolin allows you to customize the appearance of your dashboard with your own branding, including colors, logos, and custom text for authentication pages. Branding is configured through the privateConfig.yml file.

Organization Branding

In the settings of each organization, there is an Authentication Page branding settings section. These settings enable you to brand the resource authentication page and organization authentication page for that specific organization. These settings will override anything set in the configuration file.

Setting up Branding

To get started, create a privateConfig.yml file next to your existing config.yml file:

privateConfig.yml

branding:
  app_name: "MyApp"
  
  logo:
    light_path: "/branding/logo-light.svg"
    dark_path: "/branding/logo-dark.svg"
  
  colors:
    light:
      primary: "hsl(212, 65%, 35%)"
      ring: "hsl(212, 65%, 35%)"
      primary-foreground: "hsl(0 0% 98%)"
    dark:
      primary: "hsl(212, 65%, 45%)"
      ring: "hsl(212, 65%, 35%)"
      primary-foreground: "hsl(0 0% 98%)"

Mounting Branding Assets

For image assets like logos and backgrounds, you need to mount a volume to the Pangolin container to make them accessible to the application:

docker-compose.yml

volumes:
  - ./config:/app/config
  - ./branding:/app/public/branding

Your folder structure should look like this:

.
├── config/
│   ├── config.yml
│   └── privateConfig.yml
└── branding/
    ├── logo-light.svg
    ├── logo-dark.svg
    └── favicon.ico

Reference

All branding configuration options are optional. Only specify the sections you want to customize.

Application Name

app_namestring

The name of your application that appears in various places throughout the UI.

Example: "MyApp"

Favicon

To customize the favicon, mount your favicon to /app/public/favicon.ico in the container.

docker-compose.yml

volumes:
  - ./config:/app/config
  - ./branding/favicon.ico:/app/public/favicon.ico

Background Image

background_image_pathstring

Path to a custom background image used on authentication pages.

Example: "/branding/backgrounds/bg.png"

Requires mounting a volume to /app/public.

Colors

colorsobject

Custom color scheme that overrides the default Tailwind classes for shadcn components.

Colors can be provided in OKLCH or HSL format for example and apply to both light and dark modes.

Color Reference: Available color properties include background, foreground, card, card-foreground, popover, popover-foreground, primary, primary-foreground, secondary, secondary-foreground, muted, muted-foreground, accent, accent-foreground, destructive, destructive-foreground, border, input, ring, radius, and chart-1 through chart-5.

Example:

colors:
  light:
    primary: "hsl(212, 65%, 35%)"
    background: "hsl(212, 65%, 35%)"
    foreground: "hsl(0 0% 98%)"
  dark:
    primary: "hsl(212, 65%, 45%)"
    background: "hsl(212, 65%, 35%)"
    foreground: "hsl(0 0% 98%)"

For a complete list of Tailwind color classes used by shadcn components, refer to the shadcn/ui documentation.

Logo

logoobject

Logo configuration for different parts of the application.

Show LogoHide Logo

light_pathstring

Path to the logo image used in light mode.

Example: "/branding/logo-light.svg"

dark_pathstring

Path to the logo image used in dark mode.

Example: "/branding/logo-dark.svg"

auth_pageobject

Logo dimensions for authentication pages.

Show Auth PageHide Auth Page

widthinteger

Logo width in pixels.

Example: 200

heightinteger

Logo height in pixels.

Example: 80

footerarray of objects

Custom footer links displayed at the bottom of the page.

Example:

footer:
  - text: "Privacy Policy"
    href: "https://example.com/privacy"
  - text: "Terms of Service"
    href: "https://example.com/terms"

textstring

The display text for the footer link.

hrefstring

The URL or path for the footer link.

Resource Auth Page

resource_auth_pageobject

Configuration for the resource authentication page shown to users when accessing protected resources.

Show Resource Auth PageHide Resource Auth Page

show_logoboolean

Whether to display the logo on the resource auth page.

Default: true

hide_powered_byboolean

Whether to hide the "Powered by Pangolin" text on the resource auth page.

Default: false

title_textstring

The main title text displayed on the resource auth page.

Example: "Access Restricted"

subtitle_textstring

The subtitle text displayed below the title.

Example: "Please sign in to view this resource"

Emails

emailsobject

Email customization settings.

Show EmailsHide Emails

signaturestring

Custom signature appended to sent emails.

Example: "Best regards,\nThe MyApp Team"

Use \n for line breaks in the signature.

colorsobject

Email color scheme.

Show ColorsHide Colors

primarystring

Primary color for email elements.

Example: "oklch(0.6717 0.1946 41.93)"

Applying Changes

After creating or modifying privateConfig.yml, you must restart the Pangolin container for changes to take effect.

Organization Branding

Setting up Branding

Mounting Branding Assets

Reference

Application Name

Favicon

Background Image

Colors

Logo

Footer

Hide Auth Page Footer

Resource Auth Page

Emails

Applying Changes

On this page

Branding

Organization BrandingCopy Anchor Link

Setting up BrandingCopy Anchor Link

Mounting Branding AssetsCopy Anchor Link

ReferenceCopy Anchor Link

Application NameCopy Anchor Link

FaviconCopy Anchor Link

Background ImageCopy Anchor Link

ColorsCopy Anchor Link

LogoCopy Anchor Link

FooterCopy Anchor Link

Hide Auth Page FooterCopy Anchor Link

Login PageCopy Anchor Link

Signup PageCopy Anchor Link

Resource Auth PageCopy Anchor Link

EmailsCopy Anchor Link

Applying ChangesCopy Anchor Link

On this page

Organization Branding

Setting up Branding

Mounting Branding Assets

Reference

Application Name

Favicon

Background Image

Colors

Logo

Footer

Hide Auth Page Footer

Login Page

Signup Page

Resource Auth Page

Emails

Applying Changes