Header skin

Appearance → Customize → Design → Header → Header skin. Light (default) or Dark.

A skin is a preset: it sets several colours at once, including some you cannot pick individually.

Light

Emits nothing. The header’s colours already default to the page’s own — your background colour, your text colour, your border colour. Light is the header following the page.

Which means: change your Background Color in Design → General and the header follows it automatically, on the light skin.

Dark

The point is the second half of that list. Inverting a header is easy; getting the hairlines, the dropdown panel and the hover state to follow is the part that usually gets missed, and it is what makes the dark skin look finished rather than inverted.

The pickers win

Header background color and Header text color sit below the skin, both empty by default. Whatever you put in them beats the skin.

The tokens you cannot pick — the hairlines, the dropdown, the hover — keep the skin’s values. So the useful recipe for a coloured header is:

1. Pick the skin whose lightness matches your intended background — Dark for a dark brand colour, Light for a pale one.
2. Override Header background color with your colour.
3. Override Header text color if the skin’s white or black is wrong on it.

You get your colour, and the dropdown and hairlines are already on the right side of the contrast line.

Things that follow the skin automatically

• The text logo and tagline, while their own colour pickers are empty
• Social icons
• The search icon and panel
• The Outline button style
• The header border, which flips to the light side on the dark skin

An image logo does not — it is your file, printed as-is. Upload a light version for a dark header.

The footer twin

Footer skin works identically, and the two are independent: a dark footer under a light header is a common and good-looking combination.