Theming PrimeNG is based on ThemeRoller CSS Framework.

Structural CSS

These style classes define the skeleton of the components and include css properties such as margin, padding, display type, dimensions and positioning.

Skinning CSS

Skinning defines the look and feel properties like colors, border colors, background images.

Style Class Applies
ui-widget All PrimeNG components
ui-widget-header Header section of a component
ui-widget-content Content section of a component
ui-state-default Default state of a clickable element
ui-state-hover Hover state of a clickable element like mouse over
ui-state-active Active state of a clickable element like mouse press
ui-state-highlight Highlighed elements
ui-state-disabled Disabled elements
fa Icon elements based on font awesome

These classes are not aware of structural css like margins and paddings, mostly they only define colors. This clean separation brings great flexibility in theming because you don’t need to know each and every skinning selectors of components to change their style.

For example Panel component’s header section has the "ui-panel-titlebar" structural class, to change the color of a panel header you don’t need to about this class as "ui-widget-header" defines colors for panel header.

Free Themes

38 free themes are available for PrimeNG, these include the themeroller themes, twitter bootstrap theme and 3rd party themes. ThemeSwitcher on the top right section of the page dynamically changes the theme at demo pages. Themes are distributed along with PrimeNG itself. In addition, online ThemeRoller designer allows you to create a PrimeNG easily.

Premium Layouts and Themes

PrimeNG will also support premium themes and layouts derived from PrimeFaces. Upcoming layout Ultima will be available at the end of September 2016.

Ultima