Design

How to Use SLDS Design Tokens in a Custom Lightning Community Theme

Have users who want to customize branding, colors and buttons in a Lightning Community? Design tokens are the key.

The brand panel in Salesforce Community Builder is equipped with five standard palettes and six color swatches to customize them. Using Lightning design tokens, we can tie these color swatches into a custom Bolt theme, giving users control over the colors in your theme.

Sundog Blog How To Use Slds Design Tokens In Custom Lightning Community 01

This table documents the swatches and the design tokens that control them. Some swatches can have more than one token applied to them, as is the case with the Action Color.

Sundog Blog How To Use Slds Design Tokens In Custom Lightning Community 02

Using the table above, we can start by applying the action color to the buttons in our template with the colorBackgroundButtonBrand token as seen below.

.THIS button {

background: t(colorBackgroundButtonBrand);

Salesforce - Make Salesforce Stick
Make Salesforce Stick

To ensure your Salesforce implementation or migration goes as planned, our team of change management professionals discuss how to manage the transition process to ensure your team is ready, willing, and able to perform effectively in the new environment.

Get the Guide

}

.THIS button:hover {

background: t(colorBackgroundButtonBrandHover);

}

The t(tokenName) syntax designates a token reference. Note that Lightning is very particular that a token is used as it was designed. If you try to use colorBackgroundButtonBrand as a text color, your page will throw an error because it is meant only as a background property. To apply text color, you would need to use colorTextBrand or colorTextLink.

Next we could apply the Link Color design token to all our text links.

</span>

.THIS a {

color: t(colorTextLink);

}

Sundog Blog How To Use Slds Design Tokens In Custom Lightning Community 03You can allow everything from just text and buttons color changes like the above example, or you can allow broad-stroke color control over your entire theme. Design tokens are a simple way to put the power into the hands of your users.

How to Learn More

For more details on design tokens, check out Salesforce’s full documentation on the design tokens portion of the Lightning Design System reference site or reach out to us with questions.

About the Author

Susanna is an email and responsive design expert who always pursues perfection in everything she does. To Susanna, email has unprecedented influence -- it enables businesses to put solutions right into the hands of customers.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories