How to access (via javascript) the current colors of the theme palette in angular material?

Question

In angular-materialwe can define color palettes in an angular block configas follows:

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink')
    .accentPalette('orange');
});

Its quite big ...

But

I can’t find a way to handle the current color value of this palette, just to use the same colors on elements, custom or not, that do not match the list of elements supported initially.

Elements that support the theme:

• md-button
• md-checkbox
• md-progress-circle
• mdc progress linear
• md-radio-button
• md-slider
• md-switch
• md-tabs
• md-text-float
• md toolbar

refs https://material.angularjs.org/latest/Theming/02_declarative_syntax

Perhaps a little more, but of course, custom elements are not supported.

, DOM ( ), , 700 warn default?

API.

- service, (-), , :

$mdTheme.getTheme('default');

, , , , .

EDIT:

- ,

( ) :

// controller:
angular.module('myApp').controller('myCtrl',function($scope,$mdTheme){

  var primary500 = $mdTheme.getTheme('default').getPalette('primary').getHue('500');

  $scope.customStyleBorderPrimary = {
    'border-bottom': 'solid 2px ' + primary500
  };

}

<!-- in view -->
<h4 ng-style="customStyleBorderPrimary" ng-controller="myCtrl">
  My h4 title with primary border-bottom
</h4>

Answer 1

, angularjs (swapMdPaint), bower (swap-md-paint).

,

https://github.com/rbecheras/swap-md-paint

:

bower install swap-md-paint --save

:

http://bower.io/search/?q=swap-md-paint

git

git clone https://github.com/sirap-group/swap-md-paint.git public/lib/swap-md-paint
cd public/lib/swap-md-paint
git checkout v0.4.0

:

public/lib/swap-md-paint/swap-md-paint.min.js body index.html

swapMdPaint .

API

:

accent color

<div swap-md-paint-fg="accent">Default Themes Accent Color</div>

primary hue-1 ..

<div swap-md-paint-fg="hue-1">Default Themes Primary Palette Hue-1</div>

theme([default]) ([primary], accent, warn, background) ([default] hue-1, hue-2, hue-3)

[] = > , .

• swap-md-paint-fg css color
• swap-md-paint-bg css background-color
• swap-md-paint-bg css fill

-svg,

md-icon {
  fill:inherit;
}

( ), svg

github!

github: https://github.com/rbecheras/swap-md-paint