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>
Freya Themes
If you choose a freya theme, you 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 serenity-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 serenity-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) themes, please have a look at the Branding chapter.