For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

Last updated