Is it possible to change the color of disabled active mdSwitch of Angular material?

Question

I am using Angular Material md-switch. In documentation it is showing some different color when the switch is enabled. But I need a functionality like changing the color of switch when it is in Disabled Active. Please help me in acheving this. Thanks in advance.

<md-switch aria-label="Switch 11" ng-class="{'md-checked':database.somevalue.value['alarm']}" 
            ng-disabled="true"> Alarm
</md-switch>

Answer 1

Here you go - CodePen

CSS

md-switch[disabled].activeDisabled .md-container > div
{
  cursor: default;
  background: lightgreen;
}

md-switch[disabled].activeDisabled .md-container > div > div
{
  background: green;
}

Markup

<div ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
  <md-switch ng-class="{activeDisabled: data.cb1}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb1">
    Switch (Disabled, Active)
  </md-switch>

  <md-switch ng-class="{activeDisabled: data.cb2}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb2">
    Switch (Disabled, Active)
  </md-switch>

  <md-switch ng-class="{activeDisabled: data.cb3}" ng-disabled="true" aria-label="Disabled active switch" ng-model="data.cb3">
    Switch (Disabled, Active)
  </md-switch>
</div>

JS

angular.module('MyApp',['ngMaterial'])
.controller('SwitchDemoCtrl', function($scope) {
  $scope.data = {
    cb1: true,
    cb2: false,
    cb3: false
  };
});