Skip to main content

Theming

Page Themes

Page themes apply theming to all elements on the page unless they are wrapped in a content theme (see below) and are applied based on the CSS style sheet used.

  • Default: White background and black text
  • Alternative: Black background and white text

Content Themes

Content themes are used to wrap content areas that have a background with a color or image fill. Because most accent colors can only be used on white to meet accessibility, content themes are required to force child components to full black or white. This maximizes color contrast for maximum accessibility.

  • theme-light: White background and black text
  • theme-dark: Black background and white text

Example

<div class=“c-hero theme-light”></div>

Note that not all components support theme light and dark by default but this can be added later as needed. We made this choice to keep our CSS file size low as most components are never used in light or dark theme scenarios.