Configuring style properties

Use the style configuration element to configure the look and feel of the Advanced Identity Cloud/PingAM Login Widget. Style properties are set as part of the initial widget configuration, before the widget starts. Pass them to configure() and await it before starting any journey.

See Step 4. Configure the widget for more on the configuration step.

Figure 1. Use the style property to control aspects of the display

Key:

Use style/logo to add images for use in dark or light modes
Set style/stage/icon to true to render UI specific to certain stage parameter values. Supported stage values are:
- OneTimePassword - enable the Advanced Identity Cloud/PingAM Login Widget to display one-time password entry forms correctly.
- DefaultRegistration - adds UI elements to the display most suitable for user self-registration forms.
- DefaultLogin - adds UI elements to the display most suitable for user log in forms.
A section that displays the Page Header and Page Description fields from the page node configuration
To float labels above their respective fields, set style/labels to floating
Use style/showPassword to control how the password visibility toggle is rendered

Adding logos and enabling icons

import { configure } from '@forgerock/login-widget';

await configure({
  serverConfig: {
    wellknown: 'https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/realms/root/realms/alpha/.well-known/openid-configuration',
  },
  style: {
    checksAndRadios: 'animated',
    labels: 'floating',
    showPassword: 'button',
    logo: {
      dark: 'https://example.com/img/white-logo.png',
      light: 'https://example.com/img/black-logo.png',
      height: 300,
      width: 400,
    },
    sections: {
      header: false,
    },
    stage: {
      icon: true,
    },
  },
});

The sections property only applies to the modal form factor and not the inline form factor.

Learn more about the available properties in Style configuration options in the API reference.

Adding a header section

Enabling the header section separates the logo or branding from the journey form.

If you set header: true within the style/sections property, the modal uses a section with a separating line, and extra space:

Figure 2. Modal form factor with header enabled

By default, the separating section is not enabled:

Figure 3. Default modal form factor with header disabled

Configuring theme colors and fonts

Use the properties in the style/theme configuration element to set brand colors, typography, border radii, and per-component styles.

For structural changes beyond what these properties expose, such as spacing and breakpoints, see Customizing default themes at build time.

Each style/theme configuration property maps to a scoped CSS custom property on the widget’s root element.

import { configure } from '@forgerock/login-widget';

await configure({
  serverConfig: {
    wellknown: 'https://openam-forgerock-sdks.forgeblocks.com/am/oauth2/realms/root/realms/alpha/.well-known/openid-configuration',
  },
  style: {
    theme: {
      primaryColor: '#f46200',
      secondaryColor: '#003049',
      backgroundColor: '#ffffff',
      linkColor: '#f46200',
      fontFamily: 'Inter, sans-serif',
      buttonBorderRadius: 8,
      cardBorderRadius: 12,
    },
  },
});

The theme properties available are as follows:

`style.theme` properties
Property	Description
`primaryColor`, `primaryOffColor`	Hex color values (6 or 8 digit, for example `#f46200` or `#f46200ff`) for the widget’s primary brand color and its muted off-state variant.
`secondaryColor`	Hex color value for the widget’s secondary brand color.
`backgroundColor`	Hex color for the page or modal background.
`cardBgColor`, `cardTextColor`	Hex colors for card background and text.
`bodyTextColor`	Hex color for general body text within the widget.
`linkColor`, `linkActiveColor`	Hex colors for links in their default and active states.
`inputBgColor`, `inputBorderColor`, `inputLabelColor`, `inputTextColor`	Hex colors for form input background, border, label, and text.
`inputFocusRingColor`	Hex color for the focus ring on form inputs.
`selectAccentColor`, `selectHoverBgColor`	Hex colors for `<select>` elements in their default and hover states.
`buttonTextColor`	Hex color for button text.
`buttonFocusRingColor`	Hex color for the focus ring on buttons.
`fontFamily`	A CSS font family string, for example `Inter, sans-serif`.
`logo`	Full URL or base64 data URI to override the logo image. Applies a single logo regardless of color scheme. For separate light and dark variants, use `style.logo` instead.
`logoHeight`	Number of pixels for the logo height.
`favicon`	Full URL for the browser tab icon.
`buttonBorderRadius`, `cardBorderRadius`	Numbers, in pixels, controlling the corner rounding of buttons and cards.

theme.logo accepts a single URL and is independent from style.logo, which accepts separate dark and light variants for the modal form factor. Use style.logo if you need different images per color scheme; use theme.logo for a single logo applied everywhere.

Advanced Identity Cloud/PingAM Login Widget

Configuring style properties

Adding a header section

Configuring theme colors and fonts

See also