Theme Color Palette
The first thing I recommend doing is setting your theme color palette. This will make your selected colors available to most blocks in the editor.
Note: Some plugins do not pull in the color palette and will require colors to be set in a different manner.
About The Color Palette
The color palette is a group of preselected colors that are used throughout the theme styles.
- Primary Color
- Secondary Color
- Tertiary Color
- Light Grey
- Dark Grey
- White
- Black
- Transparent
The main colors to pay attention to are primary, secondary, and tertiary. The others are there mainly there to be easily selectable, though you are welcome to edit them as well.
How To Set Your Color Palette
To set your color palette, visit Appearance > Editor > Styles to access the style editor.
On the right side of the page, you’ll see the Styles panel. If the style editor panel is not open, click the half shaded circle icon in the top right corner to toggle the panel opened/closed.
Click on Colors. Then click on the default color palette. Below the default theme colors you will add your colors in the Custom section.
I’ve added a handful of custom colors to start you off. These are meant to be edited. They are used throughout the theme for various styling.
If you need to add additional colors, click the plus icon and use the color picker to select your color or enter a hex value. You can add as many colors as you like. Click Done next to the plus icon when finished selecting colors.
Edit existing custom colors before adding additional colors. Do not delete colors.
When you’re done, be sure to click the blue Save button in the upper right corner. You’ll need to click save twice.
Pro Tip: After you save, refresh to get the colors to update in other settings.