{"id":32603,"date":"2022-08-04T12:05:31","date_gmt":"2022-08-04T12:05:31","guid":{"rendered":"https:\/\/analogwp.com\/?post_type=docs&p=32603"},"modified":"2025-01-13T13:11:48","modified_gmt":"2025-01-13T13:11:48","slug":"background-color-classes","status":"publish","type":"docs","link":"https:\/\/analogwp.com\/docs\/background-color-classes\/","title":{"rendered":"Background Color classes"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Background color classes are styles that you apply on your containers and define their background and Typographic colors of Headings and Text.\u00a0<\/p>

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.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tApplying Background presets on containers<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.\u00a0<\/p>

Let’s see how this works.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Creating the background color presets<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>

You can use any color you like for these controls.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tSetting the colors for each background<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Light<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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.<\/p>

  • Background Color:<\/strong> This is usually mapped to the Light Background<\/em> Style Kit Color<\/li>
  • Text Color:<\/strong> This is usually mapped to the Body Text<\/em> Style Kit Color<\/li><\/ul>
    • Headings Color:<\/strong> This is usually mapped to the Titles<\/i> Style Kit Color<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t
      \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t

      Dark<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

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

      • Background Color:<\/strong> This is usually mapped to the Dark Background<\/em> Style Kit Color<\/li>
      • Text Color:<\/strong> This is usually mapped to the Inverted<\/em>\u00a0Text <\/i>Style Kit Color<\/li><\/ul>
        • Headings Color:<\/strong> This is usually also mapped to the\u00a0Inverted<\/em>\u00a0Text\u00a0<\/i>Style Kit Color<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t
          \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
          \n\t\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t

          Accent<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
          \n\t\t\t\t
          \n\t\t\t\t\t\t\t\t\t

          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.<\/p>\n

            \n
          • Background Color:<\/strong> This is usually mapped to the Accent (primary)<\/em> Style Kit Color<\/li>\n
          • Text Color:<\/strong> This is usually mapped to the Inverted<\/em> Text <\/i>Style Kit Color<\/li>\n<\/ul>\n
              \n
            • Headings Color:<\/strong> This is usually also mapped to the Inverted<\/em> Text <\/i>Style Kit Color<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t
              \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
              \n\t\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t

              Applying Background color classes with CSS class names<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
              \n\t\t\t\t
              \n\t\t\t\t\t\t\t\t\t

              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:<\/p>

              • sk-dark-bg<\/li>
              • sk-light-bg<\/li>
              • sk-accent-bg<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
                \n\t\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
                \n\t\t\t\t
                \n\t\t\t\t\tAdd the class name in the CSS Classes field<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"docs_category":[63],"keywords":[],"class_list":["post-32603","docs","type-docs","status-publish","hentry","docs_category-global-design"],"acf":[],"yoast_head":"\nStyle Kits Docs - Background Color classes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/analogwp.com\/docs\/background-color-classes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Style Kits Docs - Background Color classes\" \/>\n<meta property=\"og:description\" content=\"https:\/\/youtu.be\/SD1ZNOB_jE4 Background color classes are styles that you apply on your containers and define their background and Typographic colors of Headings and Text.\u00a0 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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/analogwp.com\/docs\/background-color-classes\/\" \/>\n<meta property=\"og:site_name\" content=\"AnalogWP\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/analogwp\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-13T13:11:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@analogwp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/\",\"url\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/\",\"name\":\"Style Kits Docs - Background Color classes\",\"isPartOf\":{\"@id\":\"https:\/\/analogwp.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png\",\"datePublished\":\"2022-08-04T12:05:31+00:00\",\"dateModified\":\"2025-01-13T13:11:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/analogwp.com\/docs\/background-color-classes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage\",\"url\":\"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png\",\"contentUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png\",\"width\":312,\"height\":412},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/analogwp.com\/docs\/background-color-classes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Style Kits\",\"item\":\"https:\/\/analogwp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https:\/\/analogwp.com\/docs\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Global design control\",\"item\":\"https:\/\/analogwp.com\/docs_category\/global-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Background Color classes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/analogwp.com\/#website\",\"url\":\"https:\/\/analogwp.com\/\",\"name\":\"AnalogWP\",\"description\":\"Premium Plugins for WordPress\",\"publisher\":{\"@id\":\"https:\/\/analogwp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/analogwp.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/analogwp.com\/#organization\",\"name\":\"Analog WP\",\"url\":\"https:\/\/analogwp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/analogwp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg\",\"contentUrl\":\"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg\",\"width\":600,\"height\":600,\"caption\":\"Analog WP\"},\"image\":{\"@id\":\"https:\/\/analogwp.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/analogwp\/\",\"https:\/\/x.com\/analogwp\",\"https:\/\/www.instagram.com\/analogwp\/\",\"https:\/\/www.youtube.com\/channel\/UC1pPY6TFeIv-XyE6DpMAdKA\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Style Kits Docs - Background Color classes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/analogwp.com\/docs\/background-color-classes\/","og_locale":"en_US","og_type":"article","og_title":"Style Kits Docs - Background Color classes","og_description":"https:\/\/youtu.be\/SD1ZNOB_jE4 Background color classes are styles that you apply on your containers and define their background and Typographic colors of Headings and Text.\u00a0 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 […]","og_url":"https:\/\/analogwp.com\/docs\/background-color-classes\/","og_site_name":"AnalogWP","article_publisher":"https:\/\/www.facebook.com\/analogwp\/","article_modified_time":"2025-01-13T13:11:48+00:00","og_image":[{"url":"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@analogwp","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/","url":"https:\/\/analogwp.com\/docs\/background-color-classes\/","name":"Style Kits Docs - Background Color classes","isPartOf":{"@id":"https:\/\/analogwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage"},"image":{"@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage"},"thumbnailUrl":"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png","datePublished":"2022-08-04T12:05:31+00:00","dateModified":"2025-01-13T13:11:48+00:00","breadcrumb":{"@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/analogwp.com\/docs\/background-color-classes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/#primaryimage","url":"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png","contentUrl":"https:\/\/analogwp.com\/content\/uploads\/2022\/08\/Screenshot-2022-08-04-at-15.12.48.png","width":312,"height":412},{"@type":"BreadcrumbList","@id":"https:\/\/analogwp.com\/docs\/background-color-classes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Style Kits","item":"https:\/\/analogwp.com\/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https:\/\/analogwp.com\/docs\/"},{"@type":"ListItem","position":3,"name":"Global design control","item":"https:\/\/analogwp.com\/docs_category\/global-design\/"},{"@type":"ListItem","position":4,"name":"Background Color classes"}]},{"@type":"WebSite","@id":"https:\/\/analogwp.com\/#website","url":"https:\/\/analogwp.com\/","name":"AnalogWP","description":"Premium Plugins for WordPress","publisher":{"@id":"https:\/\/analogwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/analogwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/analogwp.com\/#organization","name":"Analog WP","url":"https:\/\/analogwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/analogwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg","contentUrl":"https:\/\/analogwp.com\/content\/uploads\/2019\/01\/logo.jpg","width":600,"height":600,"caption":"Analog WP"},"image":{"@id":"https:\/\/analogwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/analogwp\/","https:\/\/x.com\/analogwp","https:\/\/www.instagram.com\/analogwp\/","https:\/\/www.youtube.com\/channel\/UC1pPY6TFeIv-XyE6DpMAdKA"]}]}},"_links":{"self":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/docs\/32603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/types\/docs"}],"version-history":[{"count":47,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/docs\/32603\/revisions"}],"predecessor-version":[{"id":37428,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/docs\/32603\/revisions\/37428"}],"wp:attachment":[{"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/media?parent=32603"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/docs_category?post=32603"},{"taxonomy":"keywords","embeddable":true,"href":"https:\/\/analogwp.com\/wp-json\/wp\/v2\/keywords?post=32603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}