Customize Ion-Toggle color

ionic-v1
1

How can I customize the <ion-toggle> class so that the toggle color is toggle-assertive.

The standard HTML toggle uses:

<li class="item item-toggle">
     HTML5
     <label class="toggle toggle-assertive">
       <input type="checkbox">
       <div class="track">
         <div class="handle"></div>
       </div>
     </label>
  </li>

But the toggle toggle-assertive class is not accessible using the ionic directive.

2

Hmm, interesting. You can do this through css but having this accessible through class is a good idea.

I used sass to get this

$red: #e74c3c;

.toggle input:checked+.track {
border-color: darken( $red, 20% ) !important ;
background-color: $red !important;
}

and in css

.toggle input:checked + .track {
  border-color: #a82315 !important;
  background-color: #e74c3c !important;
}

I’ll ping the devs about making the toggles colors exposable

1 Like
3

Created an issue : 1250

1 Like
4

In the nightly builds now

http://ionicframework.com/docs/nightly/api/directive/ionToggle/

1 Like
5

<ion-toggle toggle-class="toggle-light" ....>

   .toggle-light:checked {
        background-color: #a7cfdf;
    }

Not working for me in Ionic 2.

1 Like
6

For ionic 2 :
This will set for globally all the toggles. If you want to apply only to specific toggle then attach a class to the ion-toggle and chain the below classes :
//for the toggle shifter
.toggle-checked{
background-color: #FFCDD2; //Whatever color you want
}
//for the toggle Pin
.toggle-checked .toggle-inner{
background-color: #F44336; // Whatever color you want
}

applying changes to specific toggle :
html :
<ion-toggle class="custom-toggle"></ion-toggle>

css :

//for the toggle shifter
custom-toggle.toggle-checked{
background-color: #FFCDD2; //Whatever color you want
}
//for the toggle Pin
custom-toggle.toggle-checked .toggle-inner{
background-color: #F44336; // Whatever color you want
}