3.10 Colors

This theme has a global color scheme based on the consolidated Material Design principles.

Specific areas like Menu and Footer can have custom colors that can override the global color settings set in this specific section, but you can also set only a global color scheme, and it will take care of all the rest of the parts for you.

The material design color scheme is based on a very simple principle and set of colors:

  • Body background: defines the color of the body
  • Main container background: is the main site container. The text may sometimes be on top of this color, so you want it to be a high contrast color, similar to the Paper background
  • Paper and cards background: is a "first layer" color that highlights the container of certain elements, such as post items.
  • Text color: defines the color of the text for the whole site, while on top of the paper background
  • Titles color: used for the heading HTML element (H1, H2 and so on)
  • Accent color and Accent Hover: these colors are used mostly for the interactive elements or small decorations, buttons, links and similar. You should use a high contrast bright color.
    You should NEVER use as accent color the same color used for text or background, as this color should be visible both on dark and light backgrounds, and be different from the normal text to make links and buttons visible.
  • Primary colors: the primary colors are meant to outline a different section of the page as header, footer or special sections of the page that are not the main content.
  • Primary color text: this special color is used for the text and captions on the primary area

The theme also adds special colors and gradients that are outside of the Material Design principles and are used only for special purposes.

Duotone color light and dark:

Used as Hover effect for the post items in the archives, or as image coloring effect for the header (see the Header design section for more info).

Gradient backgrounds

The gradient background is used on special elements of the Elementor composer, in the special widgets added by the theme, as backgrounds for cards and other special items.

More info on the color palette


Was this answer helpful? 0 Users Found This Useful (2 Votes)