PrimeFaces is integrated with the ThemeRoller CSS Framework. You can either choose from the 28 pre-designed themes below or create your own using the online theme generator tool of ThemeRoller.

Base	Black-Tie	Blitzer	Cupertino
Dark-Hive	Dot-Luv	Eggplant	Excite-Bike
Flick	Hot-Sneaks	Humanity	Le-Frog
Mint-Choc	Overcast	Pepper-Grinder	Redmond
Sam	Smoothness	South-Street	Start
Sunny	Swanky-Purse	Trontastic	UI-Darkness
UI-Lightness	Vader	Casablanca (Trinidad)	BlueSky (RichFaces)

Installing Themes

Applying a theme to your PrimeFaces project is very easy, once you download the zipped theme file, extract the contents to a folder in your application. A theme consists of a css file called skin.css and images which are located in images folder.

1) Add the skin.css file to your JSF page using link tag.

2) And configure PrimeFaces not to add it's bundled default skin (sam).

			<context-param>
				<param-name>primefaces.skin</param-name>
				<param-value>none</param-value>
			</context-param>
		

That's it, as an example assume you want to use redmond theme which you've copied the theme contents to a css folder of your application.

Creating a New Theme

If you'd like to create your own theme instead of using the pre-defined ones, that is easy as well because ThemeRoller provides a powerful and easy to use online tool for this. Once you have created your own theme the way you like follow the steps in installing themes section to start using it.

Sharing Themes

If you think your custom theme looks cool and would like to share it with PrimeFaces community, feel free to contact us and we'll add it to the theme gallery.