Skip to main content

Brand colours per tenant

If your app renders the same template for many customers, mark the colours that should change per customer as brand colours. Each render can then pass that customer's colours.

How it works​

WhereWhat you doWhen
DesignerSet the template's default Primary and Accent, and pick Primary / Accent in the colour fields that should follow the customer's brand.Once, while designing
Your appSend that customer's colours as theme with each render.Every render

The colours in the designer are only the defaults. Every render can replace them:

{ "data": { "customerName": "Acme" }, "theme": { "primary": "#E11D48", "accent": "#0EA5E9" } }

A colour you don't send keeps the template's default. Elements with a fixed colour never change.

Set the palette​

  1. Click an empty part of the canvas so nothing is selected. The Properties panel shows Brand colors.
  2. Set Primary and Accent.
  3. Use Reset to defaults to go back to the default palette.

Changing the palette is one undo step and doesn't touch any element.

Use a brand colour in a colour field​

  1. In any colour field, click the palette button (Use a brand color).
  2. Pick Primary or Accent.

The field shows a chip instead of a hex value. The colour follows the palette, and each tenant's colours in a themed render. Click the × (Use a fixed color instead) to turn the chip back into its hex colour.

There are two more choices, Text on primary and Text on accent. They print black or white, whichever is easier to read on that brand colour, so text stays legible on any tenant's colour.

Preview as a tenant​

  1. Switch to Preview.
  2. Click Tenant colors.
  3. Pick the Pale, Dark or Vivid test colours, then Clear when done.

Only your preview changes. Nothing is saved. If the template has no brand colours yet, the dialog says so.

Pass a theme from code​

Add a theme to the render request. Each key is #rgb or #rrggbb. Leave one out to keep the template's own.

{ "data": { "customerName": "Acme" }, "theme": { "primary": "#E11D48", "accent": "#0EA5E9" } }
  • It works on a stored template's render, on the inline /api/render, and on the JSON render batch (one theme per batch). See the rendering reference.
  • An unknown key or a malformed colour is a 400 that names the problem.
  • A template with no brand colours renders unchanged.
  • In C#, Paperwright.Sdk 0.2.0 adds PaperwrightTheme. The Use in code snippets include a sample theme for templates that use brand colours.

Logos​

A logo is data. Bind an image to a field such as {{logo}} and send the logo as base64 or a data: URI in your render data. Remote image URLs are not fetched.

AI refine and brand colours​

When you refine a section with AI, its brand colours become fixed colours, and you get a message saying so. Pick Primary or Accent again where you want them.