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
}