Output CSS with variables

Post Reply
djmj
Posts: 394
Joined: 16 Dec 2011, 01:23

21 May 2020, 01:52

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.
Primefaces: 6.2
Primefaces-Extension: 6.2.2
OmniFaces: 3.0
Jsf: Mojarra 2.3.2
Server: Glassfish 5.0.0

aragorn
Posts: 4075
Joined: 29 Jun 2013, 12:38

14 Jul 2020, 11:25

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
Posts: 394
Joined: 16 Dec 2011, 01:23

27 Jul 2020, 19:12

That sounds interesting and i will have a look at sass-js! Thank you.
Primefaces: 6.2
Primefaces-Extension: 6.2.2
OmniFaces: 3.0
Jsf: Mojarra 2.3.2
Server: Glassfish 5.0.0

aragorn
Posts: 4075
Joined: 29 Jun 2013, 12:38

28 Jul 2020, 15:10

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

Best Regards,

Post Reply

Return to “PrimeFaces Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest