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 2: Do all premium themes share the same variables?
CSS file with variables
Code: Select all
.ui-panel-example {
color: $primaryColor;
}
Code: Select all
.ui-panel-example {
color: #{themeBean.primaryColor};
// be more flexible color: #{themeBean.getVariable('primaryColor')};
}
For our approach we will create a simple JSF form to save this theme in the database for each client.