PrimeFaces Extensions Showcase

ThemeModificationResourceHandler

This resource handler allows modifying theme resources at runtime. It can be used to customize theme colors and other properties dynamically.

faces-config.xml

<application>
    <resource-handler>org.primefaces.extensions.application.ThemeModificationResourceHandler</resource-handler>
</application>

CSS variable assignment example

:root {
    --saga-blue0: #0B78D5; /* Main color */
    --saga-blue1: #0859A7; /* Hover color */
    --saga-blue2: #0859A7; /* Active color */
    --saga-blue3: #6CBCF9; /* Focus outline color */
    --saga-blue4: #495057; /* Text color */
}

Responsive Breakpoint Configuration

You can customize the responsive breakpoint by adding a context parameter in your web.xml file. This breakpoint determines when the responsive layout changes occur (e.g. when menus collapse).

<context-param>
    <param-name>primefaces.RESPONSIVE_BREAKPOINT</param-name>
    <param-value>576</param-value>
</context-param>

The value is in pixels. The default value is 640px if not specified.