Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Trying to add more flexibility to elements css in angular-material
(function () {
"use strict";
var _theme;
var _palettes;
angular
.module('mdColors',['mdColors'])
.config(['$mdThemingProvider', function($mdThemingProvider){
// Some costume palette from the docs
$mdThemingProvider.definePalette('amazingPaletteName', {
'50': 'ffebee',
'100': 'ffcdd2',
'200': 'ef9a9a',
'300': 'e57373',
'400': 'ef5350',
'500': 'f44336',
'600': 'e53935',
'700': 'd32f2f',
'800': 'c62828',
'900': 'b71c1c',
'A100': 'ff8a80',
'A200': 'ff5252',
'A400': 'ff1744',
'A700': 'd50000',
'contrastDefaultColor': 'light', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
// use the costume palette
$mdThemingProvider.theme('default')
.primaryPalette('amazingPaletteName')
// what you really need
_theme = $mdThemingProvider.theme();
_palettes = $mdThemingProvider._PALETTES;
}])
.directive('mdStyleColor',
function ($mdColorPalette) {
return {
restrict: 'A',
scope: { mdStyleColor: '=' },
link: function (scope, element, attrs) {
for (var p in scope.mdStyleColor) {
if (scope.mdStyleColor.hasOwnProperty(p)) {
var themeColors = _theme.colors;
var split = (scope.mdStyleColor[p] || '').split('.');
if (split.length < 2) split.unshift('primary');
var hueR = split[1] || 'hue-1'; // 'hue-1'
var colorR = split[0] || 'primary'; // 'warn'
// Absolute color: 'orange'
var colorA = themeColors[colorR] ?
themeColors[colorR].name : colorR;
// Absolute Hue: '500'
var hueA =
themeColors[colorR] ?
themeColors[colorR].hues[hueR] || hueR :
hueR;
var colorValue = _palettes[colorA][hueA] ?
_palettes[colorA][hueA].value :
_palettes[colorA]['500'].value;
element.css(p, 'rgb('+colorValue.join(',')+')');
}
}
}
}
});
}());
@AshniL
Copy link

AshniL commented Sep 14, 2015

Thanks a lot. The script works great. But it does not pick up my accent color when it is custom defined like this:-

.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('green')
.accentPalette('lime')
.warnPalette('red')
.backgroundPalette('grey');
})

@MileanCo
Copy link

MileanCo commented Nov 25, 2015

@AshniL move your $mdThemingProvider.theme('default') config code into his mdColors module! Define all your colors there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment