Changing the color of a Clarity toggle switch

Question

I have a Angular project with .Net core and I'm using Clarity as well, I was wondering if there is a way to change the color of a Clarity toggle switch?

my code that I've tried so far which was not working:

 <input type="checkbox" formControlName="validateAll" Color="red" clrToggle />

---

 <input type="checkbox" formControlName="validateAll" style="background-color:red"  clrToggle />

---

<input type="checkbox" formControlName="validateAll" style="color:red"  clrToggle />

Answer 1

Add a custom class to the wrapping div, change the styles to the input as it's said in the documentation

The toggle switch is created by using ::before and ::after on the label tag. So if you name your wrapper class for the div custom-styles then your css should look like this:

.custom-styles input[type=checkbox]+label::before {
  border-color: blue;
  background-color: blue;   
}

and for checked

.custom-styles input[type=checkbox]:checked+label::before {
  border-color: red;
  background-color: red;   
}