How to configure PrimeFaces Themes

by

PrimeFaces themes are pre-designed sets of styles that define the appearance of various UI components within the library. These themes encompass elements like fonts, colors, spacing, and other design attributes. By selecting an appropriate theme, developers can instantly transform the visual presentation of their PrimeFaces components, giving their web application a consistent and polished appearance.

Configuring PrimeFaces Themes in web.xml

The web.xml file is a key configuration file in a Java web application that governs various settings, including PrimeFaces theme selection. To configure a PrimeFaces theme via web.xml, follow these steps:

  1. Select a Theme: Begin by selecting a desired PrimeFaces theme. PrimeFaces provides a range of built-in themes such as “Nova-Light,” “Nova-Dark,” “Luna-Blue,” and more. Choose a theme that aligns with your application’s design and goals.
  2. Locate the Theme Name: Each PrimeFaces theme has a unique name associated with it. This name is used to identify the theme in the configuration.
  3. Modify web.xml: Open the web.xml file in your web application project. Inside the <context-param> section, add the following lines of code:
<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>THEME_NAME</param-value>
</context-param>

There are several base themes which are available and many other customizations of the base themes. Let’s see at first the three basic themes.

The saga theme

Here is the “saga” theme as you can see it in an example application:

The vela theme

Next, here is the “vela” theme when you apply it on the same Web application:

primefaces vela theme

The arya theme

Finally here is an overview of the arya theme:

Additional Themes available

There are several other themes available which apply some customizations on the base themes. You can check the full list here: https://github.com/primefaces/primefaces-sass-theme/tree/main/themes

In order to use any of them, just remove the “primefaces” prefix in the theme name. For example, to use the “primefaces-lune-blue” theme:

<context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>luna-blue</param-value>
</context-param>

How to create a brand new PrimeFaces theme

Finally, if you want to create your own custom PrimeFaces theme, the best option is to use the Visual Designer tool to produce a custom theme.css file and import it to your project as an asset.

In order to apply it to your project, proceed as follows:

  • Firstly give a name to your theme e.g. mytheme
  • Copy and import the generated theme.css file in your application to WEB-INF/resources/primefaces-mytheme/theme.css
  • Set the primefaces.THEME context parameter accordingly:
<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>mytheme</param-value>
</context-param>

Conclusion

Configuring PrimeFaces themes via the web.xml file is a straightforward and effective way to enhance the visual appeal of your web application. By selecting and applying a suitable theme, developers can create a harmonious user experience that resonates with their brand and engages users. Whether you choose a built-in theme or embark on the journey of theme customization, PrimeFaces empowers developers to create visually stunning and user-friendly web applications that stand out in today’s competitive digital landscape.