Change switch background color per component

[Mike]

Is it possible to have different Switch fill colors in different components?  I can't turn off View encapsulation.

 

I have tried:

::ng-deep .k-switch-on .k-switch-track {
  border-color: red !important;
  background-color: red !important;
}

 

in the component .scss file but it doesn't work.

[Georgi]

Hi Mike,

Thank you very much for the code snippet provided.

From what I understood from your question, you are currently utilizing the Kendo UI for Angular Switch in multiple components across the application and are looking for an approach to set the different background colors for the different instances of the Switch without setting the encapsulation to ViewEncapsulation.None. Please, let me know if I misinterpreted the requirement.

Generally speaking, the ::ng-deep selector has been deprecated by the Angular team and therefore our team does not recommend the developers to use it:

https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

With that being said, there are two other options that would allow the developers to modify the default styling of the components in the Kendo UI for Angular library:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

Since setting the encapsulation to ViewEncapsulation.None is not an option, what I would suggest would be for the developer to utilize the id property to set unique selectors for the Switch components across the implementation and use them together with the .k-switch-on .k-switch-track CSS selector to adjust the backgrounds in the global styles.css file:

<!-- home.component.ts -->
<kendo-label text="Toggle Switch">
    <kendo-switch id="home" [(ngModel)]="checked"></kendo-switch>
</kendo-label>
...
<!-- products.component.ts -->
<kendo-label text="Toggle Switch">
    <kendo-switch id="products" [(ngModel)]="checked"></kendo-switch>
</kendo-label>

#home.k-switch-on .k-switch-track {
  border-color: blue;
  background-color: blue;
}

#products.k-switch-on .k-switch-track {
  border-color: red;
  background-color: red;
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-h3atqt

I hope the provided information helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik