0

I'm struggling on how to set and use a custom global theme for Salesforce lightning web component. I know how to use the css and set or overite classes, but I don't want to do that on all my components (I'm okay with an import).

My goal is to have a different custom theme that I could set for all my components. So when I use the different variant (e.g. variant="brand") it will get the color of my custom theme. I want to be able to set all custom classes like for Neutral, Brand, Destructive, ...

Here is a reference with classes slds-button_brand:

https://www.lightningdesignsystem.com/components/buttons/#site-main-content

Here is a reference with variant="brand":

https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

I want to achieve a similar thing as bootstrap themes with override: https://getbootstrap.com/docs/4.1/getting-started/theming/

Code example: When I do that:

<lightning-button
    label="My button"
    variant="brand"
    onclick={handleButtonClick}>
</lightning-button>

I want this button to be my custom color and not the lwc blue.

Thanks and hope it is clear enough.

0

Ok, I found out that you just need to setup a theme.

To do so:

  1. Go to Salesforce Setup
  2. Open User Interface / Themes and Branding
  3. Activate another theme (or create new one)

By setting up a theme, the slds classes (e.g. slds-button_neutral, slds-button_brand, slds-button_outline-brand, ...) will automaticaly use your new theme color.

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.