Generate custom material color palette for Angular theming

Question

I need to generate custom color palette dynamically to configure theme for my Angular App.

Default material color palette available: https://material.io/guidelines/style/color.html.

I need to generate color palette output like the above documentation dynamically, while giving color code as input.

Example: If I give #E91E63 as input in my code, the output should be color palette according to this input.

Is there any way to implement it using angular/javascript/es6?

Rahil Rahil · Accepted Answer · 2017-03-23T11:58:54

I was suppose to do same task, and i was suppose to implement same solution, try if this works for you, I am also sharing link , where i was able to find this solution ( http://codepen.io/davidwolsey/pen/Qbrqoe )

<body ng-app="myApp">
  <div ng-controller="demoController as demo" md-theme="{{theme}}" md-theme-watch="true">
    <md-button href="#" class="md-primary md-raised" ng-click=changeTheme()>
      Change theme
    </md-button>
    <div class="thing">
      Current theme is {{theme}}.
    </div>
    <div>
      <md-button href="#" class="md-primary md-raised">
        Primary
      </md-button>
      <md-button href="#" class="md-raised md-accent">
        Accent
      </md-button>
      <md-button href="#" class="md-raised md-warn">
        Warn
      </md-button>
    </div>
  </div>
</body>



(function(){
  var app = angular.module('demoApp', ['ngMaterial'])
  .config(function($mdThemingProvider) {
    $mdThemingProvider.theme('indigo')
      .primaryPalette('indigo')
      .accentPalette('pink');

    $mdThemingProvider.theme('lime')
      .primaryPalette('lime')
      .accentPalette('orange')
      .warnPalette('blue');

    // This is the absolutely vital part, without this, changes will not cascade down through the DOM.
    $mdThemingProvider.alwaysWatchTheme(true);
  })
  .controller('demoController', function($scope){
      $scope.theme = 'lime';
      $scope.changeTheme = function() {
        $scope.theme = $scope.theme === 'indigo' ? 'lime' : 'indigo'; 
      };
  });
})();

Generate custom material color palette for Angular theming

1 Answers