Theme Builder Configuration

Detailed explanation of all customization options available in the IdentitySuite Theme Builder.

IdentitySuite 3.0.0 introduces a completely redesigned Theme Builder that allows each client to define the visual structure and branding of its pages with greater flexibility and precision.

Every client can now select one of four layout templates that determine the overall page structure. Three of these templates include a Brand Panel with logo, title, and subtitle fields: in the “Form Right” layout, the brand panel appears on the left side of the page; in the “Form Left” layout, it appears on the right; and in the “Centered Layout,” the logo and title are displayed above the form while the subtitle appears below it. The default template remains the classic centered form with logo only, preserving backward compatibility with previous versions.

Template selection and branding configuration are performed directly in the Appearance tab in the client settings under Applications → Clients. In the Appearance panel, the image selection and upload component acts as a dedicated Image Library for each client. This centralized image management ensures a consistent corporate identity across all layouts and simplifies the maintenance of logos, background images, and other visual assets. Administrators can select a logo from previously uploaded images, upload new ones, or remove unused assets.

Theme Builder Appearance section

Example of the Appearance configuration panel showing layout templates and brand panel settings.

Client Selection

The Theme Builder operates on a per‑client basis. Before customizing any visual elements, you must select the client whose pages you want to configure. Each client maintains its own independent theme, layout template, image library, and branding settings.

If your environment contains multiple clients, remember to select the correct one before applying any changes, as themes are not shared across clients.

Preview Area

The preview area displays a real‑time rendering of the selected client’s pages inside an embedded iframe. Two tabs — Authentication Flow and Account Management — allow you to switch between the login and account sections to verify how your theme appears in each context.

You can toggle between desktop and mobile emulation modes using the icons below the preview. This helps ensure that all properties you set render correctly across different screen sizes.

You can refresh the preview at any time by pressing the Preview button, which reloads the current theme configuration without saving changes. The Save button applies your modifications and updates the preview accordingly, providing instant feedback on color gradients, background images, and component alignment.

Actions

The right side of the interface provides several actions to manage the theme and its preview.

  • Preview — Reloads the preview area to reflect the latest changes made in the configuration panel without saving them.
  • Save — Saves the current theme and generates the final CSS file used by IdentitySuite. The preview is updated automatically after saving.
  • Copy — Opens a dialog showing the generated CSS and provides a dropdown to select a target client. This allows you to copy the current theme directly to another client.
  • Reset — Restores all theme values to their default settings.

Component Customization

The Theme Builder organizes all customization options into three main areas: Global Theme, Authentication Flow, and Account Management. Each area contains a set of accordion panels that group related visual settings, allowing administrators to configure both global components and page‑specific structures with precision.

When selecting the Authentication Flow or Account Management areas, the preview automatically switches to the corresponding page type, ensuring that changes are displayed in context. Additionally, when an accordion panel is opened, the preview briefly highlights the relevant section with a red outline, helping administrators identify exactly which part of the interface is being modified.

Global Theme

The Global Theme section contains all visual components shared across every IdentitySuite page. These settings define the baseline appearance of core UI elements such as inputs, buttons, links, switches, validation messages, and alert messages. Customizations applied here are inherited by both Authentication Flow and Account Management pages unless overridden in their respective sections. This section also contains a Default Values accordion, which defines the base styling inherited by all components unless overridden in page‑specific settings.

Default Values

Defines the foundational design tokens used across all components. These values act as global defaults for spacing, border radius, typography, and color variables, ensuring consistency across the entire theme.

Input

Controls the appearance of all input fields. Customizable properties include spacing, padding, borders, corner radius, typography, focus states, and background styles.

Button

Defines the styling of primary and secondary action buttons. Supports customization of padding, border radius, typography, background color or gradient, and hover, active, and disabled states.

Social Login Button

Configures the appearance of social login buttons for providers such as Google, Facebook, Microsoft, Apple, GitHub, LinkedIn, and Instagram. Supports both icon‑only and full‑button modes, with customizable spacing, background, border, and hover states.

Switch

Controls the styling of toggle switches used for options like “Remember me”. Includes customization for track, active and inactive states, margin, and shadow.

Link

Defines the appearance of inline links such as “Forgot password?” or navigation links within account pages. Customizable properties include typography, color, hover effects, underline behavior, and spacing.

Validation Message

Configures the styling of validation messages displayed below inputs during form submission. Settings include typography and text color.

Alert Message

Controls the appearance of alert banners used for success, warning, and error notifications. Customizable properties include background color, border, and spacing.

Authentication Flow

The Authentication Flow section contains all customization options related to pages involved in the authentication process, such as Login, Register, Change Password, Forgot Password, and other identity‑related screens. Depending on the selected layout template, this area contains three or four accordion panels: Page, Page Container (available only for templates with a Brand Panel: Left, Right or Center), Brand Panel, and Card. These controls define the structural layout of authentication pages, including spacing, alignment, and the visual composition of the form and its surrounding elements.

Page

Defines the background of the authentication pages. This section provides a single background property, which can be configured as either a solid color or a gradient, and applies to the entire page surface.

Page Container

Controls the main container that wraps the authentication content. Available properties include width, height, min‑width, max‑width, background (color or gradient), border, shadow, and margin. These settings allow you to build full‑page layouts or card‑style layouts by adjusting the container size, positioning, and visual emphasis.

Brand Panel

Configures the branding area used in templates that include a brand panel. Panel‑level properties include min‑width, max‑width, background (color, gradient, or image), border, shadow, and padding. Logo settings allow control over width, height, object‑fit, position, margin, and shadow. Title and subtitle settings include typography, color, margin, text‑shadow, and text‑align, enabling precise control over brand text presentation.

Card

Defines the structural container of the authentication card. Properties include width, height, min‑width, max‑width, border, and shadow, allowing you to control the size and visual emphasis of the card that hosts the form.

Card Header

Controls the header area of the authentication card. Available properties include background (color or gradient), color, spacing, and typography, which define the visual style of titles or headings displayed at the top of the card.

Card Body

Configures the main content area of the authentication card. Properties include background (color or gradient), color, spacing, and typography, controlling the visual style and spacing of the form fields, buttons, and other elements inside the card.

Account Management

The Account Management section contains all customization options related to user profile and account‑related pages. This area includes three accordion panels: Page, Card, and Nav Menu, allowing administrators to adjust layout, navigation appearance, and card styling for account‑related views.

Page

Defines the background of account management pages. This section provides a single background property, which can be configured as either a solid color or a gradient.

Card

Defines the structural container used within account pages. Properties include width, height, min‑width, max‑width, border, and shadow, allowing you to control the size and visual emphasis of the card that hosts account content.

Card Header

Controls the header area of account cards. Available properties include background (color or gradient), color, spacing, and typography, defining the visual style of section titles or headings.

Card Body

Configures the main content area of account cards. Properties include background (color or gradient), color, spacing, and typography, controlling the visual style and spacing of fields, buttons, and other elements inside the card.

Nav Menu

Defines the appearance of the navigation menu used in account pages. Properties include background (color or gradient), group label color, and border color, allowing you to customize the visual separation and hierarchy of navigation groups.

Nav Button

Configures the appearance of navigation buttons within the account menu. Properties include border, padding, margin, typography, and background (color or gradient). Two visual modes are available: Normal — with customizable hover state; Selected — with its own background, border, and hover state, allowing clear differentiation of the active navigation item.

Theme Output

When the user presses Save, the Theme Builder generates the final CSS theme and applies it immediately to the selected client. From that moment on, any client accessing IdentitySuite pages (login, registration, password reset, or account management) will instantly see the updated theme without requiring additional deployment steps.

The generated CSS is stored and served directly by IdentitySuite, ensuring that visual changes become effective in real time. This enables rapid iteration and immediate feedback across all user-facing flows.

Preview Feature (Free Plan)

This feature is offered as a 30‑day preview for Free plan users. You can explore its capabilities during this period and evaluate how it fits your workflow. To continue using the full version after the preview, upgrade your subscription.