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.
1.) The header and footer background color
2.) The content section color
3.) Button and link color
Jump Links
- Where are the color settings
- The Cover Template
- The paragraph block color settings
- How do you change the colors
- You only set two colors for the content area of your site
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
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.
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
This is what a Cover Template looks like…
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…
- Overlay Background Color
- Overlay Text Color
- 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.
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…
- Accent Color
- Primary (text) Color
- Secondary (text) Color
- Subtle Background Color
- 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.