Menu
How can I change the color of angular-material's switch button without loosing the ripple effect?
Please see code pen here: http://codepen.io/shyambhiogade/pen/LpNGBP
I have changed the color to #03A9F4 and now the ripple effect is not working properly...
Code below:
<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>
596
You need to use $mdThemingProvider provider to modify elements style.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
