更改 angular-material 开关的背景颜色而不丢失波纹效果

Question

如何在不失去波纹效果的情况下改变angular-material的开关按钮的颜色？

请看这里的码笔：http://codepen.io/shyambhiogade/pen/LpNGBP

我已将颜色更改为 #03A9F4，但现在涟漪效果无法正常工作...

代码如下：

<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-app="MyApp">
  <md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
    Switch (md-primary): No Ink
  </md-switch>
</div>

Answer 1

您需要使用 $mdThemingProvider 提供程序来修改元素样式。

http://plnkr.co/edit/FRwd2fmmn0byBVUKYKi9?p=preview

angular.module('MyApp', ['ngAria', 'ngAnimate', 'ngMaterial'], function($mdThemingProvider) {
  var blueTheme = $mdThemingProvider.theme('blueTheme', 'default');
  var bluePalette = $mdThemingProvider.extendPalette('blue', {
    '500': '#03A9F4'
  });
  $mdThemingProvider.definePalette('bluePalette', bluePalette);
  blueTheme.primaryPalette('bluePalette');
})

.controller('SwitchDemoCtrl', function($scope) {});

<html>
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
</head>
<body ng-app="MyApp" md-theme="blueTheme" ng-controller="SwitchDemoCtrl">
   <div class="inset switchdemoBasicUsage">
  
  <md-switch class="md-primary" md-no-ink="" aria-label="Switch No Ink" ng-model="data.cb5">
    Switch (md-primary): No Ink
  </md-switch>
</div>
</body>
</html>

更改 angular-material 开关的背景颜色而不丢失波纹效果

Change the background color of angular-material switch without loosing ripple effect

angular-material