PrimeFaces Extensions Showcase

LightSwitch

Automatically sets a light or dark theme based on the OS settings. Put it in your template like:

<pe:lightSwitch selected="\#{userBean.theme}"/>

userBean should be a session scoped bean with a String type theme property (with both getter and setter). Then set the theme in your web.xml like:

<context-param>
    <param-name>primefaces.THEME</param-name>
    <param-value>\#{userBean.theme}</param-value>
</context-param>

This showcase uses the LightSwitch component.

See also the PrimeFaces themes documentation.

OmniFaces `CombinedResourceHandler`

With combined resources, we cannot find the theme link in the DOM tree. Therefor we need to add a node for the new theme.
Important: this node will be added as the last element in the body. If you added a custom style sheet with overrides, make sure to use more specific rules. Equal rules will be overruled by the switched theme.

Use Cases

Documentation pe:lightSwitch

Attributes (move mouse over the names to see data types)

Name	Description
automatic	Whether to automatically switch themes based on OS settings.Default is true.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
dark	The dark theme name.Default is arya-blue.
id	Unique identifier of the component in a namingContainer.Default is generated.
light	The light theme name.Default is saga-blue.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
selected	The currently selected theme name.
widgetVar	Name of the client side widget.

OmniFaces CombinedResourceHandler

OmniFaces `CombinedResourceHandler`