How can we change the css for lightning input toggle or change the standard defined css to our own?

Question

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

Answer 1

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.

Answer 2

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.

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”

Answer 3

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.