PrimeNG Theming Customization

In OneCX PrimeNG is themed through the OneCX theme, not through a PrimeNG theme of its own. The active OneCX theme provides the design tokens, and the way PrimeNG is made to follow them is a mapping mechanism (see How PrimeNG is themed in OneCX below). This feature covers the optional step of overriding PrimeNG design tokens at the application level, so that one application styles PrimeNG (or OneCX components based on it) differently from every other application on the page. These provideThemeConfig({ overrides }) values apply only to the current application and are distinct from separately managed theme-level overrides. Skipping this step has no correctness impact.

This feature is Angular-only today, because it targets PrimeNG specifically; React applications theme PrimeReact through a different mechanism.

How PrimeNG is themed in OneCX

The reason PrimeNG follows the active OneCX theme is a mapping mechanism between OneCX theming and PrimeNG theming. The OneCX theme is itself a set of design tokens (see the Theming concept page), and each application that has all required setup completed maps those tokens to a PrimeNG preset through the provideThemeConfig call, so PrimeNG — and the OneCX components built on it — pick up the active OneCX theme automatically. This feature is about such an application overriding those mapped PrimeNG design tokens for its own content, so that it styles PrimeNG differently from other applications on the page.

Application-Level Overrides

In OneCX it is possible to style the PrimeNG content differently for each application by registering application-level overrides in the application’s bootstrap providers. Each application can specify what overrides should be applied to style PrimeNG content differently than in other applications on the page. These overrides are part of the application configuration, not the shared theme configuration.

Appropriate Scenarios

This feature should be used when the application wants to control the style of:

  • PrimeNG components

  • OneCX components that base on PrimeNG components

Usage

The provideThemeConfig function is provided by @onecx/angular-utils/theme/primeng. Import it and add it once to the application’s providers before any component is rendered:

import { provideThemeConfig } from '@onecx/angular-utils/theme/primeng'

Standalone Angular applications typically register the provider in app.config.ts:

app.config.ts
import { ApplicationConfig } from '@angular/core'
import { provideThemeConfig } from '@onecx/angular-utils/theme/primeng'

export const appConfig: ApplicationConfig = {
  providers: [
    provideThemeConfig({
      overrides: {
        // ...
      }
    })
  ]
}

If the application uses AppModule instead of standalone bootstrap, add the same provider to AppModule’s `providers array. Remote modules do not register this provider, because the override configuration belongs to application bootstrap and should be set by the application that owns the current runtime.

To use this feature, it’s required to add the options object as an argument to the provideThemeConfig call. This argument has a property called overrides that can be one of the following:

  • Object with defined overrides

  • Promise that resolves with defined overrides

  • Function that returns one of the above

The object containing overrides must have the same structure as PrimeNG’s presets. The presets can contain general variables like primary color or surface color, but its also possible to define customizations for components.

Each PrimeNG component specifies a list of design tokens (e.g. button component design tokens). Those can be used to override certain styles of each component.

Examples

Overriding the primary color with static values
const primary = {
    50: '#ecfeff',
    100: '#cffafe',
    200: '#a5f3fc',
    300: '#67e8f9',
    400: '#22d3ee',
    500: '#06b6d4',
    600: '#0891b2',
    700: '#0e7490',
    800: '#155e75',
    900: '#164e63',
    950: '#083344',
}
provideThemeConfig({
  overrides: {
    semantic: {
      primary: primary,
      colorScheme: {
        light: {
            primary: primary
        }
      }
    }
  }
})
Overriding the form field focus border color with token value
provideThemeConfig({
  overrides: {
    semantic: {
      colorScheme: {
        light: {
            formField: {
                focusBorderColor: '{primary.600}',
            }
        }
      }
    }
  }
})

  • Theming — the concept page for how OneCX theming works and the theme variables available on the page.