Styling a custom switch (toggle)

Howdy,

I’m trying to change the border and background colors of a customer switch toggle, but haven’t been able to find the corresponding css:
image
I’m trying to replace the blue by the green. Has anyone had experience with this?
Thanks!

So I have customised by theme outside of Wappler, only because I can edit the file on either of my computer’s and for me the element you’re looking for is called

$custom-control-indicator-checked-bg

It should be something similar in the Theme Manager.

This will also change the custom checkbox and radio button checked colour as well.

Thanks for pointing me in the right direction!
I’m using straight css, so for anyone looking for the code excerpt, this works:

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #459613 !important;
  border-color: #459613 !important;
}
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: #82c25a !important;
  border-color: #459613 !important;
}
1 Like