How To use themes

Themes are pre-defined sets of named properties persisted in Packflow database. They are created, edited and selected runtime.

Packflow's stylesheets use references to these named properties instead of absolute values in their rules.

Thanks to a dedicated Dotless plugin, properties in stylesheets are replaced by the applicable theme's values runtime.

A theme can be selected for different scopes:

1. Site: The default theme, applies when no other is applicable.

   Administrators can select the default theme under [YourSiteUrl]/Administration/Settings

2. Application: Applies to all content under an application.

3. Application Context: Applies to all content under an application context.

   Themes for specific applications or application contexts can be set under [YourSiteUrl]/Administration/AppSettings.

4. User: Applies to content loaded for a specific user.

   Users can select a personal theme under their profile page.

Note
When loading a page, Packflow applies priority rules if several themes are applicable. The engine picks one single theme to apply. There is no cross-theme inheritance mechanism.

Users can create or edit themes runtime.

When created by simple users, themes are said private and only available to their creator. Site Administrators can create public themes anyone may select.

This control is accessible under Packflow's user menu

Below is the theme edition control, showing available named properties for edition. It can be loaded in any Packflow page.

Pressing the 'Test' button will instantly apply current settings to the page, without saving the theme or reloading the form.

It is possible to take profit of Packflow's theming system in any .less file deployed with an application. Here is an example on how to do it.

.MyElement{

/*In your file, replace this rule:*/
background-color:#333;

/*By this one:*/
background-color:PFTheme('Page_Color1');

/*This color will be dynamically set by Packflow when serving the file via the Dotless module.*/
}

Colors can be applied with transparency. This allows following the material design guidelines for borders and texts, setting strenght via transparency.

.ElementFrame{
background-color:PFTheme('Page_Color1');
border: 1px solid PFTheme('Page_Text_Color1, 0.2);
}

.ElementFrame .LightText{
color:PFTheme('Page_Text_Color1', 0.8);
}

.ElementFrame .MediumText{
color:PFTheme('Page_Text_Color1', 0.9);
}

.ElementFrame .StrongText{
color:PFTheme('Page_Text_Color1');
}

Note
Available properties names can be found by browsing properties in the theme editor. Check 'Property Name' under the property editor. (visible above) Another way to find them is to inspect PFThemeSettings constants.

Note
Theme-dependant properties can't be combined with less standard function. Example : This property will make the less compiler fail. XML Copy background-color:darken(PFTheme('Page_Color1'),20%); This is scheduled for future improvement.

When several themes may apply, Packflow applies the following logic to pick the applicable theme:

User-selected theme is always chosen when available. If not, Packflow tries to get an Application Context, then Application theme if applicable.

The site theme is applied when no other theme is relevant

Reference

Other Resources