Search code examples
angularjscssangular-materialsaas

Angular material md-switch

i want to customize the color of md-switch without writing alot of angular/js if possible

here how i want it enter image description here

i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green

 <md-switch ng-change="$ctrl.updateAsset($ctrl.asset, 
 'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>

md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}

how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?

Solution

  • What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.

    The md-checked class is active when the switch is "on".

    md-switch .md-thumb {
  background-color: darkgrey;
}

md-switch .md-bar {
  background-color: lightgray;
}

md-switch.md-checked .md-thumb {
  background-color: darkgreen;
}

md-switch.md-checked .md-bar {
  background-color: lightgreen'
}

    Obviously you should use the exact colors you want.

    You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.

    Edited to add:

    To reverse the direction, use the transform property, e.g.

    md-switch .md-thumb-container {
  transform: translate3d(100%, 0, 0);
}

md-switch.md-checked .md-thumb-container {
  transform: translate3d(0, 0, 0);
}

    Add vendor prefixes as necessary for your browser support requirements.