Change colours, fonts, and spacing

The Theme panel sets the colours, fonts, text sizes, weights, and spacing of the whole site. A change here applies to every page, so you change a colour once instead of on each page.

Open the Theme panel

Select Open editor in the header of the site's page, then select the Theme tab. The panel has five groups: Colours, Fonts, Text sizes, Weights, and Spacing. The preview shows each saved change. Edit Global Values describes the editor's header, the preview, and how saving works.

A site that runs an older release of the Local Service Core plugin can't save theme changes. The editor then says that the Theme panel needs version 0.3.7 or later and names the version the site runs. Open WP Admin, update Local Service Core under Plugins, and reload the editor.

Change colours

The Colours group has nine rows: Background, Alternate background, Text, Secondary text, Primary, Text on primary, Accent, Text on accent, and Borders. Each row has a colour picker and a hex field. Choose a colour in the picker, or type a hex value such as #1F5C99 in the field. A value that isn't a hex colour gets the message "Enter a colour as a hex value, such as #1F5C99."

Contrast warnings

When a pair of colours is hard to read, a warning appears under the second colour of the pair. For example, "Text on Background has a contrast of 3.1:1, below the 4.5:1 that WCAG AA asks for text. Visitors may find it hard to read." The Borders row warns when the contrast is below 3:1. A warning doesn't stop you from saving, so you decide whether to keep the colours.

Change fonts

The Fonts group has a Heading font and a Body font. Type in the field to filter the list, and choose a family. The list holds the fonts installed on the site, as the hint under the group says. If no font matches what you typed, the list says "No fonts match" and your search.

Change text sizes and weights

The Text sizes group has four sizes in pixels: Small, Medium, Large, and Extra large. Enter a whole number from 10 to 120. Any other value gets the message "Enter a whole number from 10 to 120."

The Weights group has Heading weight and Bold text weight. Each list shows only the weights that the chosen font has installed. When you choose a font that lacks the weight in use, the panel moves the weight to the nearest one the font has.

Change spacing

The Spacing field has three choices: Compact, Standard, and Spacious. The hint says that it "Changes the space between and inside every section of the site."

Save and undo

Select Save changes. The panel saves every value, so a save never resets a setting that you didn't touch. A message says "Changes saved." and the preview loads the site again.

Each save is a change in the site's history. Undo changes and restore snapshots explains how to reverse one.