Theming
Choose from a variety of themes or develop your own theme easily.
Architecture #
Note: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new Unstyled mode will be provided as an alternative to the default styling so that CSS libraries like Tailwind or Bootstrap can be used to style the components. This work is planned to be completed in Q3 2023.
PrimeNG is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The core resides inside PrimeNG to implement the structure of the components such as positioning whereas theme brings the colors and spacing.
Built-in Themes #
PrimeNG ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator at the topbar to switch themes.
primeng/resources/themes/bootstrap4-light-blue/theme.css
primeng/resources/themes/bootstrap4-light-purple/theme.css
primeng/resources/themes/bootstrap4-dark-blue/theme.css
primeng/resources/themes/bootstrap4-dark-purple/theme.css
primeng/resources/themes/md-light-indigo/theme.css
primeng/resources/themes/md-light-deeppurple/theme.css
primeng/resources/themes/md-dark-indigo/theme.css
primeng/resources/themes/md-dark-deeppurple/theme.css
primeng/resources/themes/mdc-light-indigo/theme.css
primeng/resources/themes/mdc-light-deeppurple/theme.css
primeng/resources/themes/mdc-dark-indigo/theme.css
primeng/resources/themes/mdc-dark-deeppurple/theme.css
primeng/resources/themes/fluent-light/theme.css
primeng/resources/themes/lara-light-blue/theme.css
primeng/resources/themes/lara-light-indigo/theme.css
primeng/resources/themes/lara-light-purple/theme.css
primeng/resources/themes/lara-light-teal/theme.css
primeng/resources/themes/lara-dark-blue/theme.css
primeng/resources/themes/lara-dark-indigo/theme.css
primeng/resources/themes/lara-dark-purple/theme.css
primeng/resources/themes/lara-dark-teal/theme.css
primeng/resources/themes/soho-light/theme.css
primeng/resources/themes/soho-dark/theme.css
primeng/resources/themes/viva-light/theme.css
primeng/resources/themes/viva-dark/theme.css
primeng/resources/themes/mira/theme.css
primeng/resources/themes/nano/theme.css
primeng/resources/themes/saga-blue/theme.css
primeng/resources/themes/saga-green/theme.css
primeng/resources/themes/saga-orange/theme.css
primeng/resources/themes/saga-purple/theme.css
primeng/resources/themes/vela-blue/theme.css
primeng/resources/themes/vela-green/theme.css
primeng/resources/themes/vela-orange/theme.css
primeng/resources/themes/vela-purple/theme.css
primeng/resources/themes/arya-blue/theme.css
primeng/resources/themes/arya-green/theme.css
primeng/resources/themes/arya-orange/theme.css
primeng/resources/themes/arya-purple/theme.css
primeng/resources/themes/nova/theme.css
primeng/resources/themes/nova-alt/theme.css
primeng/resources/themes/nova-accent/theme.css
primeng/resources/themes/luna-amber/theme.css
primeng/resources/themes/luna-blue/theme.css
primeng/resources/themes/luna-green/theme.css
primeng/resources/themes/luna-pink/theme.css
primeng/resources/themes/rhea/theme.css
Switch Themes #
Themes can be switched on-the-fly so that users of your app can choose their own theme. We have created a video tutorial that goes through the steps.
Custom Theme #
Themes are created with SASS using the primeng-sass-theme project available at github. This repository contains all the scss files for the components and the variables of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the SASS API documentation.
There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all cases, the generated theme file should be imported to your project.
Theme SCSS
The theme scss is available as open source at primeng-sass-theme repository. The theme-base folder contains the theming structure of the components, themes under themes folder import the base and define the SCSS variables. The themes folder also contains all the built-in themes so you can customize their code as well.
To create your own theme, download the release matching your PrimeNG version and access the themes/mytheme folder. The sass variables to customize are available under the variables folder. The _fonts file can be used to define a custom font for your project whereas the optional _extensions file is provided to add overrides to the components designs. The theme.scss file imports the theme files along with the theme-base folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project.
Compile SCSS Manually
Once your theme is ready run the following command to compile it. Note that sass command should be available in your terminal.
sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
Then copy and import the theme.css file in your application. For example, in Angular CLI you may place theme.css under assets folder and then import it at styles.css.
@import 'assets/theme.css';
Build Time Compilation
This approach eliminates the manual compilation by delegating it to Angular CLI. Copy the theme-base folder along with themes/mytheme folder to your application where assets reside. At a suitable location like styles.scss, import the theme.scss from assets/themes/mytheme. That would be it, during build time, your project will compile the sass and import the theme. Any changes to your theme will be reflected instantly.
Scoped CSS #
Theming styles the components globally, in case you require to change the style of a certain component use ::ng-deep.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p-panel header="Scoped Panel">
<p class="m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</p-panel>
Scale #
PrimeNG utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. Code below sets the scale of the components based on 16px. If you require bigger or smaller components, just change this variable and components will scale accordingly.
html {
font-size: 16px;
}
PrimeFlex #
PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeNG can be used with any CSS utility library like bootstrap and tailwind however PrimeFlex has benefits like integration with PrimeNG themes using CSS variables so that colors classes e.g. bg-blue-500 receive the color code from the PrimeNG theme being used. PrimeNG follows the CSS utility approach of PrimeFlex and currently does not provide an extended style property like sx. Same approach is also utilized in PrimeBlocks for PrimeNG project as well.
<div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
<p-button label="Button 1"></p-button>
<p-button styleClass="p-button-secondary" label="Button 2"></p-button>
<p-button styleClass="p-button-help" label="Button 3"></p-button>
</div>
Utils #
A couple of utility classes are provided as a solution to common requirements.
| Name | Description |
|---|---|
| p-component | Applies component theming such as font-family and font-size to an element. |
| p-fluid | Applies 100% width to all descendant components. |
| p-disabled | Applies an opacity to display as disabled. |
| p-sr-only | Element becomes visually hidden however accessibility is still available. |
| p-reset | Resets the browsers defaults. |
| p-link | Renders a button as a link. |
| p-error | Indicates an error text. |
CSS Variables #
Each PrimeNG theme exports numerous CSS variables, refer to Colors page for more details.
Theming API
API defines helper props, events and others for the PrimeNG Theming module.