Theme Colors

Themes define four main colors that are used to dynamically generate a large number of CSS variables for styling HTML components. CSS variables are combined into semantically useful CSS classes that can be used to apply multiple styles at once to an element. All colors have dynamically generated alternates that meet or exceed Web Content Accessibility Guidelines (WCAG) AA or AAA color contrast requirements that follow the utilize following naming schema:

That said, not all colors work with each other, so be careful when applying colors to text that are not the designated contrast alternative for the background the text is on. Be sure to check your color combinations with tools like: http://colorsafe.co/ or https://webaim.org/resources/contrastchecker/

{{#each themeColors}} {{{this}}} {{/each}}

The default theme style also uses the --ee-background-color CSS variable for setting the default background color for containers, including the background for this entire page.

Base Colors

Themes can also define a full spectrum of colors that will be used to dynamically generate five pairs of CSS variables using the same naming schema as the theme colors above. So the defined color plus super high contrast, high contrast, low contrast, and super low contrast alternatives:

On light themes the high contrast alternative will be darker in comparison to the theme's background color. On dark themes it will be reversed, so the high contrast alternative will now be lighter in shade, but still higher in contrast in comparison to the background color.

{{#each baseColors}} {{{this}}} {{/each}}

Greys

Themes also dynamically generate 15 levels of grey scale colors using the black and white colors defined by the theme as the two extremes. Greys only have one corresponding text color and no high or low contrast alternatives. For dark themes the grey scale will be reversed, so --ee-color-grey-1 will be the lightest shade, since it is intended to have the highest contrast compared to the theme's background color.

{{#each greys}} {{{this}}} {{/each}}