Background Color classes

Style Kits / Docs / Global design control / Background Color classes

Background color classes are styles that you apply on your containers and define their background and Typographic colors of Headings and Text. 

By default, the colors for the Light, Dark and Accent Background presets are mapped to Style Kit Colors, but you can use any color you like.

Applying Background presets on containers

This way, if you want at some point to change the color of your light or dark background color globally, you don’t need to browse through your pages and copy/paste styles among your sections to update the colors. 

Let’s see how this works.

Creating the background color presets

In the Elementor Theme Styles, under Style kits, click on the Background color presets panel. The panel will expand and show you tabs that contain the color swatches for the light, dark and accent presets.

You can use any color you like for these controls.

Setting the colors for each background

Light

The light background preset can be used on areas and surfaces of your layout that need to have a subtle differentiation in color than the background color of your site.

  • Background Color: This is usually mapped to the Light Background Style Kit Color
  • Text Color: This is usually mapped to the Body Text Style Kit Color
  • Headings Color: This is usually mapped to the Titles Style Kit Color

Dark

The Dark background preset can be used on dark-colored areas and surfaces of your layout that require inverted (negative) text on them. 

  • Background Color: This is usually mapped to the Dark Background Style Kit Color
  • Text Color: This is usually mapped to the Inverted Text Style Kit Color
  • Headings Color: This is usually also mapped to the Inverted Text Style Kit Color

Accent

The Accent background preset can be used on areas and surfaces of your layout that need to draw attention. Usually the primary accent color is used as a background color. Depending on your site’s accent color you may want to use this background preset with Inverted text as well.

  • Background Color: This is usually mapped to the Accent (primary) Style Kit Color
  • Text Color: This is usually mapped to the Inverted Text Style Kit Color
  • Headings Color: This is usually also mapped to the Inverted Text Style Kit Color

Applying Background color classes with CSS class names

You can apply this style to any section or column by adding CSS Class names in the CSS Classes field under the Advanced tab of the container. The 3 CSS classes are:

  • sk-dark-bg
  • sk-light-bg
  • sk-accent-bg
Add the class name in the CSS Classes field
Last updated on January 16, 2023

Search docs

In this category

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy