HTML Dialog Themes

With themes, the visual appearance of the application such as the color scheme and the decoration of components can be adapted. PrimeFaces comes with a number of predefined themes that you can choose from.

You can also create your own theme. To learn more about PrimeFaces themes, the web site PrimeFaces Themes is the right starting point.

The theme called freya-ivy-light is configured as the default. New dialogs will be created with this theme if you choose a current layout (template) from the core. However, you can easily configure another default theme with the following steps:

  • The PrimeFaces Built-In Themes and Serenity Themes are already included in the product. In addition, the core offers a freya-ivy and a serenity-ivy (deprecated) theme. To use your own theme, copy your themeXY.jar file into the folder /webapps/ivy/WEB-INF/lib of Designer and Engine respectively.

  • The parameter primefaces.THEME can be set as a head attribute in your template.xhtml file.

    <h:head>
    ...
    <f:attribute name="primefaces.THEME" value="freya-ivy-light"/>
    ...
</h:head>

  • If not defined as a head attribute, the theme can be configured per application (deprecated) - see app.yaml

  • The application configuration can also be overridden per session by using ch.ivyteam.ivy.jsf.primefaces.IvyPrimefacesThemeResolver.setSessionTheme(String theme) (deprecated)

Freya Themes

If you choose a freya theme, you do also need to import an additional layout stylesheet and script file.

You can fix the theme to a specific mode light or dark:

<h:head>
  <f:attribute name="primefaces.THEME" value="freya-ivy-light" />
  <h:outputStylesheet name="css/layout-ivy-light.css" library="freya-layout" />
  <h:outputScript name="js/layout.js" library="freya-layout" />
  ...
</h:head>

You also have the option to load the mode dynamically and switch it at runtime. You can do so by setting the cookie primefaces-theme-mode to light or dark, or call a specific function on the IvyFreyaTheme:

<h:head>
  <f:attribute name="primefaces.THEME" value="#{ivyFreyaTheme.theme}" />
  <h:outputStylesheet name="#{ivyFreyaTheme.layout}" library="#{ivyFreyaTheme.library}" />
  <h:outputScript name="js/layout.js" library="#{ivyFreyaTheme.library}" />
  ...
</h:head>

Warning

If you change an existing template to the freya-ivy theme, you may need to set the body-hd and the theme mode #{ivyFreyaTheme.mode} class on the <h:body> tag, or simply start from a new generated frame template:

<h:body class="body-hd #{ivyFreyaTheme.mode}">

Serenity Themes (Deprecated)

If you choose a serenity theme, you can choose all the default serenity themes or the serentiy-ivy theme. If you do so, you have to import an additional layout.css file:

e.g. serenity-lime theme

<h:head>
  <f:attribute name="primefaces.THEME" value="serenity-lime" />
  <h:outputStylesheet name="css/layout-lime.css" library="serenity-layout" />
  <h:outputScript name="js/layout.js" library="serenity-layout" />
  ...
</h:head>

or the serentiy-ivy theme

<h:head>
  <f:attribute name="primefaces.THEME" value="serenity-ivy" />
  <h:outputStylesheet name="css/layout-ivy.css" library="serenity-layout" />
  <h:outputScript name="js/layout.js" library="serenity-layout" />
  ...
</h:head>

PrimeFlex

PrimeFaces has an additional library PrimeFlex, which allows to use FlexBox with PrimeFaces widgets (e.g. by using <p:panelGrid layout="flex">). Additionally, we recommend to reference primeflex-2.min.css in your template.

PrimeFlex is provided by the core in version 2 and is by default referenced in new layouts (templates). You can also add it to your template as follows:

<h:head>
  ...
  <h:outputStylesheet name="primeflex-2.min.css" library="primeflex" />
  ...
</h:head>

Color Customizing

If you want to change the colors of the freya-ivy or serenity-ivy (deprecated) theme, please have a look at the Branding chapter.