Changing theme in PrimeFaces

By mkyong | Updated: August 13, 2012

Viewed: 1,775 (+19 pv/w)

Tags: primefaces theme

PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes that you can download and apply in seconds. In this tutorial, we will show you how to change a theme n PriceFaces.

There are two ways to change a theme :

1. Using Maven to download and apply.
2. Download manually and apply.

1. Maven Download

For Maven user, visit this PrimeFaces available theme, select a theme and remember the theme, defined in Maven and configure the web.xml.

In this case, we will show you how to change a default theme (aristo) to glass-x theme.

File : pom.xml

    //...
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>Prime Repo</name>
			<url>http://repository.primefaces.org</url>
		</repository>
	</repositories>

	<dependencies>

		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>glass-x</artifactId>
			<version>1.0.6</version>
		</dependency>

	<dependencies>

File : web.xml

    //...
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>glass-x</param-value>
	</context-param>

Run it, the theme color will be changed, and looking inside the source code, it point to glass-x now.

<!-- html source code -->
<link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x" />

2. Download Manually

For non-Maven user, just visit the PrimeFaces’s repository and download the theme jar manually, and put it in your project classpath, and configure the web.xml.

File : web.xml

    //...
	<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>glass-x</param-value>
	</context-param>

Change Theme Dynamic

A nice trip to use EL expression to apply a theme dynamically. See following code snippet :

File : web.xml

  <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>#{loggedInUser.preferences.theme}</param-value>
  </context-param>

P.S Reference – PrimeFaces user guide

References

1. PrimeFaces Available Themes
2. jQuery Theme Roller
3. PrimeFaces User Guide