Inside the css resource of a lightning component, is there a way to retrieve the various values that were set inside the branding editor ?

enter image description here

For example, I would like to be able to do something similar to this

.THIS #MyCustomActionButton {
    background: [some token here that reference the blue Action Color];


  • can you not inspect element look for the color code and set as background in the css file. May be i am missing the point completely, what is the intent of getting such a color pointer? – Rao Nov 5 '15 at 23:28
  • 1
    If I wanted to publish a component on the app exchange, I would need to be able to match the styling of my component with that the end user selects, instead of having the user manually override the styling. – Olivier Lamothe Nov 6 '15 at 15:38

Right now, you won't be able to get those values directly. However, they are accessible via some css tokens that you can set on your components:

/* New classes available in Napili (only ActionColor is available in Koa/ Kokua) */

/* Action Color */
.THIS .betaTokenActionColorText {
   color: t(colorBrand);

.THIS .betaTokenActionColorBG {
   background-color: t(colorBrand);

.THIS .betaTokenActionColorBorder {
   border-color: t(colorBrand);

/* Action Color Darker */
.THIS .betaTokenActionColorDarkerText {
   color: t(colorBackgroundButtonBrandHover);

.THIS .betaTokenActionColorDarkerBG {
   background-color: t(colorBackgroundButtonBrandHover);

.THIS .betaTokenActionColorDarkerBGHover:hover {
background-color: t(colorBackgroundButtonBrandHover);

.THIS .betaTokenActionColorDarkerBorder {
   border-color: t(colorBackgroundButtonBrandHover);

/* Link Color */
.THIS .betaTokenLinkColorText {
   color: t(colorTextLink);

.THIS .betaTokenLinkColorBG {
   background-color: t(colorTextLink);

.THIS .betaTokenLinkColorBorder {
   border-color: t(colorTextLink);

/* Link Color Darker */
.THIS .betaTokenLinkColorDarkerText {
   color: t(colorTextLinkHover);

.THIS .betaTokenLinkColorDarkerBG {
   background-color: t(colorTextLinkHover);

.THIS .betaTokenLinkColorDarkerBorder {
   border-color: t(colorTextLinkHover);

/* Border Color */
.THIS .betaTokenBorderColorText {
   color: t(colorBorder);

.THIS .betaTokenBorderColorBG {
   background-color: t(colorBorder);

.THIS .betaTokenBorderColorBorder {
border-color: t(colorBorder);
  • When I try to save in my component .css file, I get an error that says : Failed to save undefined: No THEME named markup://[namespace]Theme found: Source Am I missing something ? Thanks ! – Olivier Lamothe Nov 16 '15 at 16:53
  • Olivier - You shouldn't be putting the content I posted directly in your component css. Its really meant to be a reference for the selectors available to your containers. So, for example, you have a border color of 'gray'. You could use <div class='betaTokenBorderColorText'></div> to make the text color in that container gray; you could use <div class='betaTokenBorderColorBG'></div> to make the background of that container gray...etc. – user26375 Nov 16 '15 at 17:17
  • Oh I see. Thanks ! Would be great if those token or less/sass function were directly available inside our components. – Olivier Lamothe Nov 16 '15 at 18:18
  • I'm not sure i understand how the workaround works, were you able to match context palette by using tokens on your component css? Are those tokens the "t(colorBrand)" on the css file? – andrea Feb 12 '16 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.