How to use Colors in Global styles

In this article we will guide you to setup Color in Global styles to have a consistent style in all pages.

How to use Colors

By default, Color will have 3 Schemes and 1 option set for Other colors. You can click Add Scheme to create your own Scheme.

What's in a Scheme

1. Section colors

The basic colors of a section include: Background, Heading text and Body text.

2. Button colors

Button color has two states:

Normal:

• Background: the button’s background color.

• Label: the text color.

• Outline: the outline color of the button.

Hover:

• Background tone: add a color layer on top of the button background.

• Label: add a color layer on top of the text.

• Outline: add a color layer on top of the outline.

Dragging the slider to the left applies a white tone layer, while dragging to the right applies a black tone layer. The further you move the slider toward either side, the less transparent the tone layer becomes.

How to change color in Scheme?

You can change a color by clicking the color box and using the color picker, or by entering a Hex code directly.

We hope this article helps you understand how to use Color in Global styles to set consistent colors for your theme.

Have a question?

Contact us via in-app live chat. We'll reply in few minutes.