In angular-material, color palettes can be defined in an angular config block like this:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
It's quite impressive...
However,
The issue arises when trying to use the current color value of a specific palette on custom elements that are not natively supported. The list of natively supported elements includes:
- md-button
- md-checkbox
- md-progress-circular
- md-progress-linear
- md-radio-button
- md-slider
- md-switch
- md-tabs
- md-text-float
- md-toolbar
For more information, visit: https://material.angularjs.org/latest/Theming/02_declarative_syntax
Unfortunately, custom elements are not supported.
So how can we apply the current value of a specific palette within a theme to custom DOM elements or nested elements?
I have searched through the API and couldn't find any solution.
An ideal scenario would be to have a service that exposes methods for accessing theme palettes, such as:
$mdTheme.getTheme('default');
This method should return an object containing all the palettes defined in the theme.
EDIT : Here is an example of how it could be used
This may not be the most elegant code design, but it gets the job done
Once we have access to the theme palettes, we can use them in custom or native directives:
// 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
};
}
And then
<!-- in view -->
<h4 ng-style="customStyleBorderPrimary" ng-controller="myCtrl">
My h4 title with primary border-bottom
</h4>