White label
You build the site. Your client edits it in the admin. With a brand, the admin shows your logo, your color, and your links, not the Pluto ones.
You set the brand in code, in app.config.ts. It is part of the site, so it goes through Git review like the rest of your code. There is no settings page for it: your client cannot change it.
Set the brand
export default defineAppConfig({
pluto: {
brand: {
name: 'Acme Studio',
logo: '/brand/acme.svg',
logoDark: '/brand/acme-white.svg',
mark: '/brand/acme-mark.svg',
url: 'https://acme.studio',
helpUrl: 'mailto:help@acme.studio',
primary: '#0F766E',
radius: 0.5,
plutoLinks: false,
},
},
})
Put the logo files in public/. Every field is optional. Set only what you need.
Fields
| Field | What it does |
|---|---|
name | The name of your agency or product. It is the alt text of the logos, the label of the url link, and the end of the tab title when the site has no name. |
logo | The logo for a light background. The sign-in card shows it in light mode. |
logoDark | The logo for a dark background. The admin navbar is dark in both modes, so it shows this logo. The sign-in card shows it in dark mode. |
mark | A small square logo. The navbar shows it on a small screen. The default is logoDark, then logo. |
url | Your website. The user menu has a link to it. |
helpUrl | Where your client gets help: a page, a mailto: link, or a chat. The user menu shows Help. |
primary | Your brand color, as a hex value. See The primary color. |
radius | The corner radius of the admin, in rem. The default is 0.25. |
font | The text font of the admin, as a font-family value, for example '"Inter"'. Your app must load the font. |
fontDisplay | The font of the page titles. The default is font. Without font, it is Fredoka. |
plutoLinks | Set it to false to hide Pluto on GitHub in the user menu. |
Without a logo, the admin keeps the Pluto logo. So a brand can change only the color.
The primary color
Give one hex color. Pluto makes the whole color scale from it:
- In light mode, the primary buttons and links use your color exactly.
- In dark mode, they use a lighter step of the same scale.
- The first series of the dashboard charts uses it too.
The primary buttons have white text. Pick a color with a contrast of 4.5:1 or more against white. In development, Pluto logs a warning when the contrast is lower, or when the value is not a hex color.
Use a hex value, not a color name such as emerald. The brand style is added at run time, and Tailwind does not see it, so a color name can have no values.
What does not change
- The status colors (success, info, warning, error) and the other chart colors. They are checked for contrast and for color blindness. See Styles.
- Your public site. The brand applies to the admin only.