Categories
Twenty Twenty theme settings

Color Settings in Twenty Twenty Theme

At first the color settings are confusing. But they make real sense when you understand how they work.

The important point is…

You set some of the colors. Then WordPress automatically sets the other colors for you. WordPress does this to ensure your text contrasts well with any background colors you choose.

This is a good idea and it works really well in practice.

Header, footer & content areas

You can choose your own color for the site header. The post title displays inside the header area in Twenty Twenty theme. So the header color covers the area behind the logo, navbar and post title. The color you set for the header will also be used for the footer area of your site.

Content area colors. The color you choose for the content area, covers the part of your web page where you type your blog post or web page text.

There are no sidebars in Twenty Twenty theme.

Background colors in Twenty Twenty theme by WordPress.
Background colors you can change in Twenty Twenty theme by WordPress.

1.) The header and footer background color
2.) The content section color
3.) Button and link color

Jump Links

Where are the color settings?

There are color settings in the customizer and in the post editor block settings.

There are two tabs in the WordPress Customizer that contain color settings.

Go to Dashboard > Appearance > Customize

The colors tab

The colors tab in the WordPress customizer for Twenty Twenty theme.
The colors tab in the WordPress customizer for Twenty Twenty theme.

In the image above, you can see there are three settings under the colors tab.

  • Background Color
  • Header & Footer Background Color
  • Primary Color

See the image below

1.) Header & Footer Background Color is the background color of the header area and footer area.

2.) Background Color is the color behind the content area of your pages and posts.

3.) Primary Color is the color of buttons and links.

Color picker, slider and input box

The background color pickers have an input box where you can type a hexadecimal code.

But the primary color only has a slider. You can not type a hexadecimal code directly in to a box to set the primary color. So when you’re choosing your button and link color, you must use the slider.

The primary color selector only has a slider. It does not have a box to type in a hex code.
The primary color selector only has a slider. It does not have a box to type in a hex code.

No text color

When you select a background color it makes sense to select a text color at the same time. So why is there no option to set a text color?

WordPress sets the text color for you!

Twenty Twenty theme has a built in system that chooses the text colors for you. It will analyze the background color you choose. And then select a text color that contrasts well with that specific background color.

This ensures your content is easy to read.

At first I found this system confusing. But if you put your trust into WordPress and the Twenty Twenty theme, you’ll be surprised how well it works.

That’s how the background colors work, next we’ll look at the cover image tab…


The Cover Template Tab

Go to Dashboard > Appearance > Customize

This time select the Cover Template tab

Color settings available through the customizer's cover template tab.
Color settings available through the customizer’s cover template tab.

This is what a Cover Template looks like…

A Cover Template page template in Twenty Twenty theme by WordPress.
A Cover Template, page template, in Twenty Twenty theme by WordPress.

When you use the Cover Template for your page or post, your featured image displays behind the post title. To make the text readable, WordPress places an overlay color below the text but above the photo.

The Cover Template color settings in the customizer

The color settings are…

  1. Overlay Background Color
  2. Overlay Text Color
  3. Overlay Opacity

The overlay background color, by default, is set to the accent color. The accent color is the color of the buttons and links. We set that color in a previous step in this tutorial.

The accent color is the primary color. You find it under the colors tab in the customizer.


The color settings above are in the customizer. Now I’ll explain about the color settings that are found in the Block tab. The Block tab is fond to the right hand side of the post editor.


The paragraph block color settings

I’ll use the paragraph block to explain how the post editor color settings work. Other blocks will have similar settings.

Color settings for the paragraph block in Twenty Twenty theme.
Color settings for the paragraph block in Twenty Twenty theme.

Select a paragraph, click the block tab in the right hand sidebar, then open the color settings tab.

You now see these options.

The colors used in the dialogue box above are the default colors in the Twenty Twenty theme. They are…

  1. Accent Color
  2. Primary (text) Color
  3. Secondary (text) Color
  4. Subtle Background Color
  5. Background Color

How do you change these colors?

1.) Accent Color

  • Go to: Dashboard > Appearance > Customize > Colors
  • Select the Primary Color radio button
  • Drag the slider to select a color

2.) Primary Text Color

The primary text color is automatically set by WordPress when you choose a background color.

3.) Secondary Text Color

The secondary text color is automatically set by WordPress when you choose a background color.

4.) Subtle Background Color

The subtle background is automatically set when you choose a background color.

5.) Background Color

  • Go to: Dashboard > Appearance > Customize > Colors
  • Under the Background Color option, click the Select Color tab
  • Use the color picker to select a background color

The background color option sets the background color for content area of your site. It’s the background color, behind the text on your blog posts and web pages.

So, you only set two colors for the content area of your site

Use the subtle background color to highlight boxes such as this.

What a jolly good idea!

You set the accent color, which controls the button color and link color. And you set the content area background color.

The text colors and a subtle background color are automatically set by WordPress. The subtle background color is ideal for call out boxes and pullquote background colors like the one used here.

By Philip Gledhill

I've been building websites since 1995. I usually use Genesis, GeneratePress and Beaver Builder. But Twenty Twenty theme is just so good I couldn't help myself. I had to tell you what a great theme this is in the hope you'll try it out.