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 :
- Using Maven to download and apply.
- 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>
Visit this PrimeFaces repository directly, check the theme folder to know which one is the latest.
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