Material: Need an official API to query theme colors

[robertlevy]

I'm trying to build an interactive style guide which displays color swatches for the selected theme. As part of this, I need to query the rgb value of colors from JS. The best way I've found to do this so far is pretty hacky:

$mdThemingProvider._rgba( $mdThemingProvider._PALETTES[$mdThemingProvider.theme().colors['accent'].name][$mdThemingProvider.theme().colors['accent'].hues['default']].value)

It would be great to have a more concise and less-likely-to-break API for this.

[sourceRS]

I agree, there's definitely room for improvement on this.

It'd be nice to be able to do something like this:
$mdThemingProvider.getTheme()
and have that return a JSON object with key-value pairs of all colors being used for the given theme. Maybe getTheme() can take a string which will just return one specific theme, otherwise if you have multiple color schemes, it would return an object with keys for each theme?

[marcysutton]

There is something similar currently being discussed. See #1269 and #1599. @rschmukler any updates on the colors module?

[SanderElias]

@robertlevy, you can inject the constant $mdColorPalette into your function. It's undocumented, but its an json array with all colors for all pallet's. That's half of the equation.

The other half is an easier way to retrieve the current theme, preferably indeed as an JSON array like this:
{ primary : "blue", accent: "yellow", warn:"red",background:'gray',isDark:true}

If you combine those 2, you have all you need.
In #1269 I can then combine those, and generate the needed css for all those.

@rschmukler, see where I want to go?

[bonatoc]

I was under the impression that Angular Material already used some kind of mechanism to generate the hues.

From what I understand, the palettes hues are built around a central color, and hues as hexadecimals are (I guess) calculated with some Sass or whatever magic : It's obvious that the hues aren't solely calculated on lighten() or darken() pre-processor commands, saturation/desaturation are also involved (see A100).

If I were to extend

 .md-hue-[1/2/3]

to

 .md-hue-[50/100/200/300/400/500/600/700/800/900/A100/A200/A400/A700] 

...classes, where would be the best place to hook into?


Maybe I'm missing something, but considering there is :

Specifying Custom Hues For Color Intentions

You can specify the hues from a palette that will be used by an intention group by default and for the md-hue-1, md-hue-2, md-hue-3 classes.

By default, shades 500, 300 800 and A100 are used for primary and warn intentions, while 400, 300, 800 and A100 are used for accent.

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('pink', {
      'default': '400', // by default use shade 400 from the pink palette for primary intentions
      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
    })
    // If you specify less than all of the keys, it will inherit from the
    // default shades
    .accentPalette('purple', {
      'default': '200' // use shade 200 for default, and keep all other shades the same
    });
});

...I was under the impression that Angular Material already had classes like ".md-hue-A100" to call wherever, as a local override.

[mprentic-harris]

We are looking for something like this as well. We are building a material design datetime picker and need to query the service for the current theme's primary and accent palette so that we can pick the right set of colors out of each palette.

[EladBezalel]

Please see md-colors

[bonatoc]

@EladBezalel -> "see md-colors" - Could you please provide a link?
I could not find this in the docs.

[devversion]

• Demo: https://material.angularjs.org/HEAD/demo/colors
• Public Service: https://material.angularjs.org/HEAD/api/service/$mdColors
• Directive: https://material.angularjs.org/HEAD/api/directive/mdColors