	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

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

Preset primefaces.THEME

Apple Liquid Glass style: translucent overlays, menus and bars that blur the page behind them, capsule buttons.

Color scheme color-scheme

Input style p-input-filled

Density data-p-density

Direction primefaces.DIR

Colors

Primary --p-primary-base

Custom

Surface --p-surface-*

Shape and motion

Button shape --p-button-border-radius

Shadows --p-*-shadow

Animations --p-transition-duration

Ripple --p-ripple-opacity

Border radius --p-border-radius-*

Typography

Font family

Font size

Focus ring

Width

Offset

Form field

Padding x

Padding y

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).

Attributes

Name	Default	Description
mode	overlay	overlay: a button at the edge of the window opens the panel; inline: the panel in the page.
presets	aura,lara,nora,material,metal,glass	The presets to choose from, comma separated (custom themes too); empty: no preset choice.
direction	true	Whether the user can choose the direction.
export	true	Whether the CSS of the changes is shown to copy.
style	null	Inline style of the container.
styleClass	null	Style class of the container.

Usage

configurator.xhtml