Pingendo Help Center

Color scheme


#1

Pingendo sets no limits to theme customization. Once you have started building a website, it becomes necessary to define the color palette that fits the best.

The default set is shown in the THEME inspector on the right. It contains all the most important variables that affect the aspect of the page. Color are specified in the BRAND COLORS section. At the beginning it would look like this

Every field is editable and changes will be applied immediately to the whole project as the CSS file is compiled. Input the HEX color that you want and see the components changing accordingly.

Some colors have to be customized following your own style, while other could be already fine with the default values. Light, dark, success or warning are already set but can be changed anytime from the SASS inspector.

Almost every element can be customized. In example, select a text and click on the ELEMENT inspector in the right panels. Then change the COLOR value from the list below.

It’s important to remember that the color list can be different between components: a button will have the secondary and the link option, while a text will show other options. Moreover, elements inherit color classes from the parent column or section, so you can decide to change the whole body color to affect all the texts at once (local changes will overwrite this parental setting).

Clicking on the SASS panel below will let you see and change directly the variables shown in the THEME inspector.

Good work and enjoy Pingendo!