Theming in PACo is based on the way theming is implemented in Fluent UI (https://developer.microsoft.com/fluentui/) by using palette slots with something extra: Each palette slot also has a related color property containing a hex color code which has a good contrast with its related palette slot. These additional color properties makes it much easier to work with colors in the canvas components.
Below is an example of the property Color of the text label control used in the canvas component PACo_Button_A.
All canvas components have a custom property called cmp_Theme which expects a PACo theme structure. Because of this setup, you can create and use your own PACo theme to style all canvas components.
PACo includes three themes:
- Default: https://github.com/formsandflows/PACo/blob/main/Files/Theme_Default
- Dark: https://github.com/formsandflows/PACo/blob/main/Files/Theme_Dark
- High-contrast: https://github.com/formsandflows/PACo/blob/main/Files/Theme_HighContrast
The canvas app PACoCo contains the functionality to switch themes via the themes screen which is accessible via the settings menu item “Themes” in the settings menu of the header on the home screen.
The canvas app PACo Examples also contains the three themes but for this canvas apps, the theme to use must be configured in App.Formulas.
PACo does not use all palette slots as defined by Fluent UI. Only the following palette slots are used in the canvas components:
There are a few canvas components which have custom properties containing a color related property. For example, the custom property cmp_DetailsList of canvas component PACo_DetailsList_A. These properties can use theme palette slots or you can use your own colors. That is why the canvas app PACoCo uses some additional palette slots.
The canvas app PACoCo contains a color screen which is only visible when editing the canvas app containing a block for each palette slot of the current active theme. The text in the block has a color as defined in the related color property. Below, PACo theme “Default” is shown.
This color screen can help you in creating your own themes: How-to create your own theme