PrimeFaces Extensions Showcase

ThemeAccentColorResourceHandler

This resource handler replaces the accent color of the Arya, Saga and Vela themes with variables. Variables are named themeX, theme is the lower case theme name, X is the index number of the color.

faces-config.xml

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

CSS variable assignment example

:root {
    --saga0: hsl(29, 44%, 53%); // Main color
    --saga1: hsl(29, 44%, 57%); // Hover color
    --saga2: hsl(29, 44%, 61%); // Active color
    --saga3: hsl(29, 44%, 77%); // Focus outline color
    --saga4: hsl(29, 44%, 23%); // Text color
}