Appearance → Customize → Header. Three settings, in the order you should use them: Header skin, then Header background color and Header text color if the skin is not quite it.
The skin
Light (the default) means the header takes the page’s own colours: the background colour behind it, the text colour on it. Change the page colours and the header follows.
Dark sets four things at once — a near-black background (#111111), white text, a lightened tagline, and lightened hairlines for the dropdowns and the mobile drawer. The last two are why Dark is a skin rather than just “set the background black by hand”: a grey tagline and a black-tinted hairline both disappear on a dark bar, and both are adjusted for you.
Overriding it
Header background color and Header text color each override one part of the chosen skin. Leave either empty and that part follows the skin.
The most common use is a coloured masthead — your brand colour as the background, white as the text — which neither skin gives you:
- Header skin → Dark. This gets the tagline and the hairlines right.
- Header background color → your colour.
- Leave Header text color empty if white suits it; set it if not.
Starting from Dark rather than Light matters here: on Light the hairlines stay dark and will not show against a saturated background.
Contrast
The header text sits on the header background, and nothing checks that pair for you. At the size the menu and tagline are drawn, WCAG AA wants 4.5:1. A mid-tone brand colour with white text is usually somewhere around 3:1, which reads as washed out on a phone in daylight — darken the background rather than brightening the text.
The tagline is drawn at 60% opacity on a dark header, so if the background is only just dark enough for the title, the tagline will not clear the bar.
An image logo on a dark bar
There is one logo upload, not one per skin. Switching to Dark with a dark logo gives you a black rectangle. Upload the light version of the mark, or keep the header light. See logo and site title.