Output CSS with variables

[djmj]

Hello PrimeFaces team,

in the close future we want to use one or multiple premium themes or the designer API to create multiple themes being configured in our database for each website we serve.

Current status

We manually created around 8 themes using the jQueryUI themeroller adjusting some colors and parameters. This is too much work to do for each new theme / client and we need to keep each individual file updated.

Requirements

We only need to change a few variables to adapt a theme and so we want to save those variables in our database / bean to allow on the fly editing.

Dynamic approach A

We need the SCSS file to either:

• output the variables directly
• support arbitrary string like '#{theme.primaryColor}' as variable value

Question 1: Can SCSS output the variables directly?
Question 2: Do all premium themes share the same variables?

CSS file with variables

Code: Select all

.ui-panel-example {
    color: $primaryColor;
}

CSS file with el expression

Code: Select all

.ui-panel-example {
    color: #{themeBean.primaryColor}; 
    // be more flexible   color: #{themeBean.getVariable('primaryColor')};
}

PrimeFaces Theme Editor

For our approach we will create a simple JSF form to save this theme in the database for each client.

[mert.sincan]

For Dynamic css, you can use the Sass js compiler; https://sass-lang.com/documentation/js-api You can save variables to the database and then provide themes using Sass.js on the client after fetching variables.

[djmj]

That sounds interesting and i will have a look at sass-js! Thank you.

[mert.sincan]

Nice API We are using it in PrimeReact/PrimeVue/PrimeNg Designers.

Best Regards,