I would like to change the color of the toggle from blue to green.

Want to change the color from Blue

And I want this This is when the div is disabled

3 Answers 3


Use Styling hooks for this purpose.

Here's how it works: in your parent component (the component that holds the lightning-input), add the following CSS rules:

:host {
  --sds-c-checkbox-toggle-color-background-checked: #009900;
  --sds-c-checkbox-toggle-color-background-checked-focus: #00CC00;

For reference, here's the full list of styling hooks for the toggle component.

  • Thanks, What about the disables button, can we change the color for that too. Is it possible?
    – Zan3
    Commented Nov 8, 2021 at 9:47
  • 1
    Unfortunately, there's no styling hook exposed for the disabled state. You won't be able to customize the base component color for this state. BTW unlike the screenshot you shared, the component is not showing up as pale blue when disabled, it's just grey.
    – POZ
    Commented Nov 8, 2021 at 10:38

As of now, it can be achieved using the following styling hooks.

.toggle {
--slds-c-checkbox-toggle-color-background: #78d301;
--slds-c-checkbox-toggle-color-background-hover: #78d301;
--sds-c-checkbox-toggle-color-background-focus: #78d301;

--sds-c-checkbox-toggle-color-background-checked: #78d301;
--sds-c-checkbox-toggle-color-background-checked-hover: #78d301;
--slds-c-checkbox-toggle-color-background-checked-focus: #78d301;

--slds-c-checkbox-toggle-color-border: #78d301; 
--sds-c-checkbox-toggle-color-border-focus: #78d301;

--sds-c-checkbox-toggle-color-border-checked: #78d301;

Just add the class to the CSS file of your custom component and assign it to lightning-input.

an example Note: some of the hooks are not mentioned in the documentation as supported.

Also, be aware that Salesforce may stop support for “--sds” namespace in the future. If some “--sds” hook fails, try to change it’s namespace to “--slds” the reference


For complete control over styling, you are best off using the SLDS blueprints for the toggle input.

You will be able to add your own CSS rules without running into shadow DOM limitations.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .