Theme Information

The web components have a concept of color themes, or ways to style components to meet branding standards. This is a list of all themes and components that can be managed through the theme option. Providing a theme is optional. If you do not specify a theme, then one will be provided for you based on the component.

List of Themes

• White (il-theme-white)
• Blue (il-theme-blue)
• Orange (il-theme-orange)
• Gray (il-theme-gray)
• Blue Gradient (il-theme-blue-gradient)
• Orange Gradient (il-theme-orange-gradient)
• "Default Theme" (list of themed components when the theme is not chosen)

Implementation

You can add the themes (as classes) to either the component itself or a wrapping container.

Note that the themes are managed through CSS variables, so you should use those to reference the theme colors. For example, this site uses the following CSS:

.fixed-background-color {
    background-color: var(--il-background-color);
    max-width: var(--il-content-max-width);
    margin: auto;
    padding: 50px;
}

Run into an issue?

Please create a Github issue so we can look into it.

Report an issue