Checkbox / Switch Theme Colors

[itg-assistant]

Brayden McLachlan asked 2025-09-29 03:21:51 UTC

Hi,

I am creating a custom theme and for the life of me, I can't seem to find the property for the color of the "Circle Knob" when using a Checkbox with an appearance of "Switch" in the checked state.

I have changed the color of the "Bar / Line" and the Focused colors, but nothing inside the Switch section seems to affect the color of the circle in a checked state.  It is still Blue as I am using Bootstrap as a Base theme.

Thanks,

Brayden.

[itg-assistant]

Julie (ITG) answered 2025-09-29 16:56:10 UTC

So first off, make sure that you're changing the properties of the Switch, not of the Checkbox. The appearance is controlled by Switch.

Next, if you look closely at the Switch properties, under "Icon" there are several options- Default, Checked, Undetermined, and Hovered. You can set the knob color for each. The knob is actually a pseudo element added with css under the switch appearance. So you need to edit the css.

Here's an example of what the JSON looks like for setting the knob color to red for the "checked" state

"switch": {
"components": {
"icon": {
"checked": {
"styles": {
"color": "transparent",
"css": "{\"overflow\":\"visible !important\",\":before\":{\"content\":\"\",\"width\":\"18px\",\"height\":\"18px\",\"border-radius\":\"20px\",\**"background-color\":\"red\"**,\"position\":\"absolute\",\"top\":\"-4px\",\"left\":\"22px\",\"transition\":\"left 100ms\"}}"
}
}
}
}
}

I've also attached a screenshot of how to change it in the Theme Builder.