ThemeRoller approach

To gain first-hand experience of the ThemeRoller online visual tool, go to the ThemeRoller home page, explore the available theme's gallery, and play with the CSS properties to see changes for widgets embedded on the page. All CSS changes will be applied on the fly.

We have to select one of the existing themes (the Gallery tab) and edit it (the Roll Your Own tab). A click on the Download theme button accomplishes the work.

Next, we need to migrate the downloaded theme files from ThemeRoller to the PrimeNG theme infrastructure. The migration steps are straightforward:

1. The theme package that we have downloaded will have a CSS file jquery-ui.theme.css (as well as minified variant) and the images folder. Extract the package and rename the CSS file as theme.css.

1. In your web application, create a folder with the name of the new theme, for example, src/assets/themes/crazy.
2. Copy theme.css and the images folder into src/assets/themes/crazy.

After you are done with these steps, you can create a link to the theme.css in the index.html file:

<link rel="stylesheet" type="text/css"  
      href="src/assets/themes/crazy/theme.css"/>

This was the easiest way to create your custom themes without requiring knowledge of CSS.