Theme Builder Configuration

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

The Theme Builder allows administrators to customize the visual appearance of IdentitySuite’s user-facing pages, including login, registration, password reset, email change, and profile management screens. All changes are previewed in real time and can be exported as a CSS theme.

Application Selection

The Theme Builder requires selecting one of the applications previously created in IdentitySuite. The selected application determines which login and account management pages are used for previewing the visual changes.

  • Application: Choose the target application whose UI theme you want to customize.
  • Preview Context: The preview automatically adapts to the selected application’s branding and configuration.

Preview Area

The left side of the Theme Builder displays a live preview of the UI components affected by the theme. Two preview modes are available:

  • Login Form: Shows how authentication pages (login, register, forgot password) will appear.
  • Manage Account Form: Shows how account-related pages (profile, email change, password update) will appear.

The preview updates automatically when the user applies changes, allowing immediate visual feedback.

Actions

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

  • Preview: Refreshes the preview area to reflect the latest changes made in the configuration panel.
  • Save: Saves the current theme and generates the final CSS file used by IdentitySuite.
  • Copy: Opens a dialog displaying the generated CSS and includes a dropdown to select a target client. This allows copying the current theme directly to another client, with the option to copy the CSS manually as well.
  • Reset: Restores all theme values to their default settings.

Component Customization

The customization panel is organized into an accordion containing multiple UI components. Each component exposes a set of visual properties that can be modified to match the desired branding. Changes are immediately reflected in the preview area, allowing precise control over the final appearance.

Default Values

Defines global styling presets applied to all components that support the selected properties. When the user clicks Apply, the configured values (colors, radius, border width, font settings) are propagated to every component that uses them. This is useful for establishing a consistent baseline theme.

Card

Controls the appearance of the main window container used across all IdentitySuite pages. This includes the outer box that wraps login, registration, and account management forms.

  • Border Color — color of the container border.
  • Border Radius — corner rounding of the window.
  • Border Width — thickness of the border.
  • Shadow — drop shadow applied to the window.

Card Header

Defines the appearance of the header section of the window, where page titles such as “Sign In” or “Manage Account” are displayed.

  • Background Color — header background.
  • Text Color — title color.
  • Padding — internal spacing.
  • Font Size, Weight, Family — typography of the header text.

Card Body

Controls the styling of the inner content area of the window, where form fields, buttons, and validation messages are displayed.

  • Background Color — inner container background.
  • Text Color — default text color.
  • Padding — spacing around the content.
  • Font Size, Weight, Family — base typography.

Input

Defines the appearance of all input controls, including username, password, email, and all fields used in login and account management forms.

  • Border Color, Radius, Width — input field border styling.
  • Focus Outline (BoxShadow) — visual highlight when the field is focused.
  • Background Color — input background.
  • Text Color — input text color.
  • Padding — internal spacing.

Button

Controls the base styling of all buttons, including shape, spacing, typography, and transition animations. Additional accordions define variant-specific colors and states.

  • Border Radius — button shape.
  • Border Width — border thickness.
  • Transition Duration, Delay, Timing Function — animation behavior.
  • Padding — button size.
  • Font Size, Weight, Family — button typography.

Button Variants

Each variant includes four states (Normal, Hover, Active, Disabled), each with customizable Background, Text, and Border colors, plus a dedicated Focus Outline.

  • Primary — main action buttons (e.g., “Sign In”).
  • Outline — secondary actions with emphasis on borders.
  • Danger — destructive actions (e.g., “Delete Account”).

Switch

Defines the appearance of toggle switches used in login and account management pages, such as the “Remember me” option.

  • Border Color — track border.
  • Focus Outline (BoxShadow) — focus highlight.
  • Background Color — active track color.

Link

Controls the appearance of hyperlinks used throughout the UI, such as “Forgot password?” or navigation links in account management pages.

  • Font Size, Weight, Style, Family — link typography.
  • Text Decoration — underline behavior.
  • Text Color for Normal, Hover, and Active states.
  • Transition — animation settings for state changes.

Validation Message

Defines the appearance of validation and error messages displayed below input fields.

  • Font Size, Weight, Style, Family — message typography.
  • Text Color — typically an error color.

Alert

Controls the appearance of alert boxes used to display success, warning, or error messages in login and account management flows.

  • Padding — internal spacing of the alert box.
  • Success / Warning / Error — each variant includes:
  • • Background Color
  • • Text Color
  • • Border Color, Radius, Width

Theme Output

When the user presses Save, the Theme Builder generates the final CSS theme and applies it immediately to the selected application. 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.

  • Save: Applies the theme globally and makes it active for all clients.
  • Copy: Opens a dialog showing the generated CSS for manual inspection or external use.
  • Reset: Restores all theme values to their default configuration.

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.