Salesforce lightning web component use custom theme or color for all lwc component

Question

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.

Answer 1

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.