Skip to content

Portal Themes

A portal theme decides how your portals look: the colours, the fonts, the spacing, and the shape of every button, table and menu. You set it up once, and every portal built on it follows. If your company changes its brand colour, you change it in the theme, and all your portals pick it up.

Portal themes are separate from report themes. A report theme styles the PDF documents you generate. A portal theme styles the web pages your users sign into.

In this section

Page What it covers
Theme Designer A tour of the theme designer, tab by tab, and the styling sections of a single widget
How Themes Work Where a widget's colour or font actually comes from, and which tool to use for which change
Variants Alternative looks for a widget, such as a compact button or an outlined badge
Overrides Small reusable CSS snippets you can apply to parts of individual widgets
Custom CSS and Variables Free CSS, external stylesheets, icon packs, and the CSS variables a theme provides

How a portal gets its theme

A portal does not pick a theme on its own. The theme comes with the portal's design:

  1. A theme holds the visual settings.
  2. A design combines one theme with the page layouts. You choose the theme when you create the design (New Portal Design → Theme). You can change it later in the design editor's Design ribbon tab.
  3. A portal picks its design when you create it.

Several designs can share one theme. One theme change can therefore restyle many portals at once.

Managing themes

Open Themes in the Portals app's navigation. The Portal Themes list shows each theme's name and description. From here you can create, open and remove themes.

  • Add new theme asks for a Name, an optional Description and a Template:

    • Standard gives light surfaces with a teal primary colour.
    • Dark gives dark surfaces and muted borders, with the same teal primary colour.

    The template's values are copied into your new theme as a starting point. If the template changes in a later product update, your theme keeps its own values. See Templates.

  • Edit opens the theme designer. Double-clicking a row or clicking its name does the same.

  • Right-click a row for Update Name & Description and Delete. Delete asks you to confirm.

Who can change themes

Changing themes needs the Portal Themes permission. People who can only view themes see a Read-only access badge on the list. For them the add, edit and delete buttons are disabled. They can still open a theme and look around the designer, but Save theme is hidden. See Access Control.

Good to know

  • There is no duplicate command for themes. To start a new theme from an existing one, copy its JSON from Theme Info (see Base) and paste it into the new theme.