Switch Checked Text Color

[David Ocasio]

Is there a way I can affect the text color for the checked state of the switch without hacking the theme. through htmlattributes or something like that. I want in in one place not globally.

[Petar]

Hi David,

To achieve the targeted functionality, what you can do is to add a custom class to the Switch component which colors you want to change. This custom class can be added with HtmlAttributes as demonstrated below.

@(Html.Kendo().Switch()
    .Name("switch")
    .HtmlAttributes(new { @class="switch-change-color" })
    .Events(ev => ev.Change("onChange"))
    .Messages(m=>m.Checked("Yes"))
)

Once the class is applied, use the following CSS to style the "ON" and "OFF" states of the Switch component. 

.switch-change-color > .k-switch-container > .k-switch-label-on {
    color: greenyellow;
}

.switch-change-color > .k-switch-container > .k-switch-label-off {
    color: orange;
}

I hope the above details will help you implement what you need in your application.

Regards,
Petar
Progress Telerik