Themes

PrimeFaces is integrated with the ThemeRoller CSS Framework. You can either choose from the 38 pre-designed free themes, purchase the ELITE themes or create your own using easily the online theme generator tool of ThemeRoller.

ELITE Themes

ELITE Themes are available to ELITE & PRO users exclusively. They are also available as a standalone purchase without upgrading to ELITE or PRO. License type of the ELITE themes is a Site License under the terms and conditions of PrimeFaces Commercial License.

MetroUI
Buy Now for $49

Community Themes

Community themes are open source and free to use under Apache License. These themes include the ones available in ThemeRoller and custom themes like Twitter Bootstrap.

Twitter Bootstrap

afterdark
afternoon
afterwork
aristo (default)
black-tie
blitzer
bluesky (richfaces)
casablanca (trinidad)
cruze
cupertino
dark-hive
delta
dot-luv
eggplant
excite-bike
flick
glass-x (richfaces)
home
hot-sneaks
humanity
le-frog
midnight (wijmo)
mint-choc
overcast
pepper-grinder
redmond
rocket (wijmo)
sam
smoothness
south-street
start
sunny
swanky-purse
trontastic
twitter bootstrap
ui-darkness
ui-lightness
vader

Installation

Applying a theme from Theme Gallery to your PrimeFaces project is very easy, you just need to download the theme jar, add it your classpath and configure PrimeFaces to use it.

1) You can either download the theme manually from repository or using maven.

Manual Download

PrimeFaces community themes are bundled as jar files available at PrimeFaces Repository.

Maven Dependencies

<dependency>
	<groupId>org.primefaces.themes</groupId>
	<artifactId>cupertino</artifactId>
	<version>1.0.10</version>
</dependency>
		
All community themes are also available in "all-in-one" package.
		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>all-themes</artifactId>
			<version>1.0.10</version>
		</dependency>
		

2) Next and final step is setting primefaces.THEME parameter with the theme name, note that you can also use an EL expression for dynamic themes.

			<context-param>
				<param-name>primefaces.THEME</param-name>
				<param-value>bootstrap</param-value>
			</context-param>
		
That's it!

Creating a New Theme

If you want to create a custom theme instead of using the prebuilt ones, easiest way is to use the ThemeRoller which provides a visual tool to create your themes easily without requiring knowledge of CSS. Once you've downloaded your custom theme from ThemeRoller, refer to User's Guide for more information and an example about applying your theme. There is also a 3rd party Theme Converter application as an alternative.

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.