Themes

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

Available Themes

aristo

black-tie

blitzer

casablanca (trinidad)

cupertino

dark-hive

dot-luv

eggplant

excite-bike

flick

hot-sneaks

humanity

le-frog

midnight (wijmo)

mint-choc

overcast

pepper-grinder

redmond

rocket (wijmo)

sam

smoothness

south-street

start

sunny

swanky-purse

trontastic

ui-darkness

ui-lightness

vader

bluesky (richfaces)

glass-x (richfaces)

home

Download

PrimeFaces themes are bundles as jar files and are available for download at PrimeFaces repository. As of 3.0.M4 and newer, Aristo replaced Sam as the built-in theme of PrimeFaces and Sam is available as a downloadable theme.

Compatibility

Following is the compatibility information between PrimeFaces versions and Theme versions..

  • PrimeFaces 2.2 : Themes 1.0.0 and 1.0.1
  • PrimeFaces 3.0+ : Themes 1.0.2, 1.0.3

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 via;

<dependency>
	<groupId>org.primefaces.themes</groupId>
	<artifactId>cupertino</artifactId>
	<version>1.0.2</version>
</dependency>

2) Next 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>cupertino</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.

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.