Theme Configurator
ThemeConfigurator lets the user change the theme at runtime: preset, color scheme, input style, density, direction, primary color and the main tokens. The settings are kept in the browser and applied before the first paint of every page, so nothing flickers on load.
Inline
In the page, e.g. a settings page. The overlay of this showcase (palette button at the right edge) is the same
component with mode="overlay", both stay in sync.
Theme
Colors
Shape and motion
Border radius --p-border-radius-*
Typography
Focus ring
Form field
Opened by another button
A button with data-tc-toggle and the client id of an overlay configurator opens it.
Setup
1. Enable it in the web.xml: the head renders a small script that applies the stored settings
before the first paint, preset and direction are read from cookies on the server.
<context-param>
<param-name>primefaces.THEME_CONFIGURATOR</param-name>
<param-value>true</param-value>
</context-param>
2. Add the composite component, e.g. in the template (overlay) or on a settings page (inline). It needs no form.
<html xmlns:pc="jakarta.faces.composite/primefaces" dir="#{p:dir()}">
...
<pc:themeConfigurator/>
<pc:themeConfigurator mode="inline" presets="aura,lara" direction="false" export="false"/>
#{p:theme()} and #{p:dir()} return the preset and the direction of the request
(chosen by the user or primefaces.THEME / primefaces.DIR).