Customizing default themes at build time

The Advanced Identity Cloud/PingAM Login Widget provides a default theme with both light and dark modes.

Figure 1. Example of the modal component in dark mode

You can alter these themes by updating a Tailwind configuration file and rebuilding the Advanced Identity Cloud/PingAM Login Widget

If your organization’s UX or brand requires pixel-perfect UIs developed in accordance to Photoshop, Figma or other "design mocks", Advanced Identity Cloud/PingAM Login Widget might not be able to support such requirements.

Switch between light and dark themes

To switch to the dark mode, you can manually add tw_dark to the <body> element:

<body class="tw_dark"></body>

The Advanced Identity Cloud/PingAM Login Widget defaults to the light mode if the class is not present.

You can programmatically apply the class if required:

const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkTheme) {
    document.body.classList.add('tw_dark');
}

Customizing the default themes

To reconfigure the theme to use different colors, fonts, or sizing you can provide new values to the Tailwind configuration file and rebuild the Advanced Identity Cloud/PingAM Login Widget, as follows:

Download the Advanced Identity Cloud/PingAM Web Login Framework from the GitHub repository:

git clone https://github.com/ForgeRock/forgerock-web-login-framework.git
In a terminal window, navigate to the root of the Advanced Identity Cloud/PingAM Web Login Framework:

cd forgerock-web-login-framework
Run pnpm to download and install the required packages and modules:

pnpm install
Run the development script:

pnpm run dev
Run Storybook:

pnpm run storybook

Make a note of the URLs to the Storybook UI listed in the terminal output:

Figure 2. URLs to the Storybook UI

Open the tailwind.config.cjs file in the root of the Advanced Identity Cloud/PingAM Web Login Framework and adjust your theme by adding them under the extend property:

// tailwind.config.cjs
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}', './.storybook/preview-head.html'],
  darkMode: 'class',
  presets: [require('./themes/default/config.cjs')],
  theme: {
    extend: {
      // Add your customizations here
      colors: {
        body: {
          light: 'darkblue',
        },
        primary: {
          dark: 'darkorange',
        },
        background: {
          light: "gainsboro",
        },
      },
      fontFamily: {
        sans: ['Impact'],
      },
    },
  },
};

Navigate to the Storybook UI provided in the terminal output earlier to view your changes:

Figure 3. Customized registration modal in Storybook

Changes you make to the tailwind.config.cjs file are automatically reflected in the Storybook UI when you save them to disk.

Recommendations

Anything configurable in Tailwind is also configurable in the theme. The custom properties the default theme uses are stored in the /themes/default/tokens.cjs file.

We recommend you do not directly modify these default theme files. Only modify the root tailwind.config.cjs.

Supported customization

Using the methods on this page, you can customize:

Colors
Fonts
Type sizes
Spacing
Breakpoints