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:
--ee-color-{ color }
- primarily intended for setting the background color of an element--ee-text-on-{ color }
- A WCAG compliant text color for the above.--ee-color-{ color }-super-high-contrast
- An much higher contrast shade of the default
color--ee-text-on-{ color }-super-high-contrast
- A WCAG compliant text color for the above.--ee-color-{ color }-high-contrast
- A higher contrast shade of the default color--ee-text-on-{ color }-high-contrast
- A WCAG compliant text color for the above.--ee-color-{ color }-low-contrast
- A lower contrast shade of the default color--ee-text-on-{ color }-low-contrast
- A WCAG compliant text color for the above.--ee-color-{ color }-super-low-contrast
- A much lower contrast shade of the default color--ee-text-on-{ color }-super-low-contrast
- A WCAG compliant text color for the above.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/
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.
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.
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.