Colors and Styles, as it sounds, manages colors of theme different parts. Also set background image for Body, Header and Footer. In theme panel go to Publisher → Theme Options → Colors and Styles:
There is a button labeled Reset Color Settings. By clicking this, all settings of Colors and Styles will reset to theme default (what you see right after first installation).
In the red rectangular (above image) there are several accordions each labeled by their corresponding section name. If you click on + for each one, options reveal. These options are repeating for all accordions. Some of them have few options some of them have more. We describe what they mean so where ever you see one of them, you know what it means. General Colors, Header, Posts and Pages Colors and Footer are exceptions and described in detail.
Font Color: It simply changes color of corresponding font.
Background Color: Change color of item background.
Hover Color: When a link or an item is hovered by mouse, its color changes to Hover Color.
General Colors
1- Theme Highlight Color: It is the contrast color for the theme. It effects all links, menu, category overlays, main page and many contrasting elements.
2- Site Background Color: Change background color of all site. Setting a Body Background Image (see below) will override it.
3- Body Background Image: Set an image for website background. Use light patterns in non-boxed layout. For patterns, use a repeating background. Use photo to fully cover the background with an image. Note that it overrides the background color option.
Header
1- Show Header Top Line? You can hide header border top line with this option.
2- Header Top Line Color: Change header top line color.
3- Main Menu Top Line Color: Change header top & bottom line color.
4- Main Menu Text Color: Change main menu text color.
5- Main Menu Text Hover Color: Change main menu hover color with this option. Hover color appears when the text hovers by mouse.
6- Main Menu → Sub Menu → Hover Color: You can change hover color of sub-menu items in main menu.
7- Main Menu Background Color: Change main menu background color.
8- Responsive Header Color Scheme: Select responsive header color scheme (see below image).
9- Header Background Color: Change header background color with this option.
10- Header Background Image: Set an image for header background. Use light patterns in non-boxed layout. For patterns, use a repeating background. Use photo to fully cover the background with an image. Note that it overrides the background color option.
Posts and Pages Color
1- Links Color: You can change hyperlinks color.
2- Links Mouse Hover Color: Change link mouse hover color.
Footer
1- Footer Copyright Links Color: Change footer links color.
2- Footer Copyright Links Hover Color: Change footer links hover color.
3- Footer Widgets Text Color: Choose the color of texts in footer widgets! Consider following option, “Widgets Background Color”, to make footer text legible.
4- Footer Widgets Background Color: Change footer widgets background color. Consider above option, “Widgets Text Color”, to make footer text legible.
5- Copyright Footer Background Color: Change footer Copyright background color.
6- Footer Social Icons Background Color: Change footer social icons background color.
7- Footer Background Color: Change footer background color.
8- Footer Background Image: Set an image for footer background. Use light patterns in non-boxed layout. For patterns, use a repeating background. Use photo to fully cover the background with an image. Note that it overrides the background color option.