General

Themes and the Theme Builder

A theme is the set of colours, fonts, and shapes that brand Powerlily for your company: your navigation, buttons, cards, charts, and the proposals your customers see. The theme builder lets you design that look once and apply it everywhere, and it can be set at three levels so the right people see the right branding.

The three levels of theme

Powerlily applies themes in a strict order of priority. The most specific one wins.

Company theme. The default look for everyone in your company, staff and customers alike. An admin builds it and applies it to the company. Unless someone has a more specific theme below, this is what they see.

Personal theme. A team member can pick their own theme for their own view of the app, which overrides the company theme for them only. This is a personal preference (for example a dark mode) and does not affect anyone else or what customers see. Personal themes are for staff, not clients.

Quote theme. An individual quote and its proposal can carry their own colours, so a specific customer's proposal can be branded differently from the rest. A quote theme overrides both the personal and company themes for that proposal. (A few elements like the sidebar are not part of a quote theme, since a proposal has no sidebar.)

In short, the order is: quote theme, then personal theme, then company theme, then a built-in default if none is set.

What a theme controls

The theme builder is organised into sections, each covering one part of the interface:

General. Page background, navigation bar and its text, sidebar colours, tooltips, and scrollbar.
Cards. Card and border colours, plus corner roundness and shadow (blur and offset).
Buttons. Button colour, text, hover colour and hover text, and button roundness.
Forms. Input background, text, border, focus colour, placeholder, and input roundness.
Text. Body text colour, muted text, and the font family.
Notifications. The success, info, danger, and warning alert colours, and their badge text colours.
Charts. The colours used for production, consumption, credit, and purchase in your energy charts and proposals.
Gradients. The hero gradient (start, end, and text) used on banner sections.

There is a range of fonts to choose from, and most colours offer both a picker and a hex input for an exact match to your brand.

Building and applying a theme

From the theme settings you can:

Create a new theme by starting from your current theme, copying another of your themes, or beginning from a light or dark base.
Start from a preset. Powerlily ships a library of preset themes (light, dark, and seasonal and named palettes) you can apply as-is or use as a starting point.
Randomize to explore palettes quickly.
Save your changes, and save and apply to the company to push the theme live for everyone.

Only admins can apply a theme to the whole company. You cannot delete a company's only theme, so there is always at least one in place.

Where themes show up

Your theme colours flow through the whole app: the navigation, sidebar, cards, buttons, forms, and the energy charts. They also brand the customer-facing proposal and portal, which is why a quote theme is useful when you want one customer's proposal to look distinct. The downloadable proposal documents you build with the PDF builder are styled separately, in that builder, rather than from the theme (see the related article).

Quick reference

To brand the whole company: build a theme and use save and apply to company (admin only).
To set your own look without affecting others: apply a personal theme to your account.
To brand one customer's proposal differently: apply a theme to that quote.
Remember the order: quote beats personal beats company beats the default.

The Client Portal. What customers see, which your theme brands.
PDF Templates and the Proposal Builder. Downloadable documents are styled there, separately from themes.
Team Members, Roles, and Permissions. Applying a company theme is admin-only.