This content is for the @clr/angular package. Theme information for the @cds/core package can be found in storybook. Read more

Themes help you customize the look and feel of your application.

Establish your brand with Clarity

Match a company or client’s unique brand identity with color theming at many different levels of granularity allowing for customization at an application or component level.

Font customization and the Clarity Icons API offer the power to reinforce identity at the most fundamental levels of user experience.

Depending on users’ expectations, different applications may require different degrees of information density. Clarity themes can be adjusted to make an application as sparse or compact as it needs to be.

Theme Guidelines

Themes offer a great deal of flexibility — which can be both a good and bad thing. The Clarity team has put continued effort towards accessibility and the intentional use of color so that our end users can add great value to their products with minimal investment.

But theming can put some of those benefits at risk. Please review the following guidelines before building a custom theme.

Use color responsibly

Use colors that reinforce your brand but in a way that is pleasing.

Save saturated or bright colors in your palette for highlights. And use them sparingly to highlight actions or content.

Harsh colors can cause eye strain for users over time. Avoid using too many bright, neon colors and avoid using highly saturated/bold colors as backgrounds over large areas of content.

Use brand colors in a pleasing manner

Communicate with color

Consider using color to communicate meaning to users. Using colors like red for warning or danger and green for success or preferred actions reinforces your user experience.

Don't use brand colors irrespective of what the color communicates to users

Create visual hierarchy

Darker colors recede while lighter and brighter colors push forward. Be mindful of this when working with brand colors to create a custom theme.

Use light and dark colors to reinforce visual hierarchy.

Draw attention to the wrong items with the use of color.

Color draws visual focus. Visual hierarchy can be re-inforced or circumvented. Be specfic to where a design guides vidual focus. Observe an unintended effect in the example above where the content in the cards and the datagrid recede into the background while the sidenav and the header draw the visual attention away from the data.

Avoid extreme color combinations

Avoid extreme light-on-dark and dark-on-light color combinations that could contribute to eye strain.

Don't use color combinations that may cause eye-strain

Be Accessible

Clarity’s color palette is WCAG AA compliant, meaning all color combinations of text-on-background meet the standard for color accessibility for our users. Use the WebAIM Color Contrast Checker tool to test text and background colors when deciding how a brand’s color palette will be used in an application.

All of the text/background combinations on the Clarity Color Palette page are tested for WCAG AA compliance.