Theming

Introduction

Theming allows you to modify how the component looks. Each component has a different set of theming options.

For example, the Text component would let you set the text's color, whereas as the table component can let you set the selected row's color.

Adding a theme

Each component has some preset defaults which can then be overridden as necessary.

• Click on the component you want to theme.
• Click on the THEME tab on the properties panel.
• Change the desired theme options.

Theme Variations

You often want to override one or more of the theming options based on dynamic conditions. For example, setting the color of the text based on the status (green if it's approved and red if it's denied).

This can be useful to dynamically modify how a component looks.

Adding a variation

• Click on the component you want to theme.
• Click on the THEME tab on the properties panel.
• Click on + Variation to add a new variation.
• Set the name of the variation (Can be any string value)
• Add a condition that evaluates to true/false. This condition can be dynamic.
• Change the desired theme options.

Note: You can add as many variations as you like. They cascade in order the last variation in the list overrides the previous and so on.

Theme Types

Colors

Theme options such as color, backgroundColor etc. require a hex input. (Ex. #FF0000). You can either use the color picker that opens on clicking on the input or type the value in directly.

A small preview next to the value shows the color.

Numbers

Theme options such as padding and margin accept numbers (in pixels.)

Border

Theme options such as border accept a css border declaration. (Ex: 1px solid #FFF) You can also use the border picker to use a GUI to define the border.

Shadow

Theme options such as shadow accept a css box-shadow declaration. (Ex: 0px 4px 8px #FFFFFF3) You can also use the shadow picker to use a GUI to define the shadow.