Themes help you customize the look and feel of your application.
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.
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.
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.
Darker colors recede while lighter and brighter colors push forward. Be mindful of this when working with brand colors to create a custom theme.
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 light-on-dark and dark-on-light color combinations that could contribute to eye strain.
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.