Material: theme: colors not available outside of framework components

[oliversalzburg]

Bug, enhancement request, or proposal:

Theme classes, like md-warn should be applicable to any element.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue: https://codepen.io/oliversalzburg/pen/YmjvJz

Detailed Reproduction Steps:

1. Create an arbitrary element, like a span and apply any of the theme color classes.

What is the expected behavior?

The element is colored according to the theme.

What is the current behavior?

It isn't.

What is the use-case or motivation for changing an existing behavior?

The declared theme should affect all areas of the application that the developer sees fit. The current behavior forces them to duplicate functionality, by creating additional styles which aren't under control of the AngularJS Material theming support.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7
• AngularJS Material: 1.19
• OS: All
• Browsers: All

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

You can use md-colors to do this via md-colors="{'color': 'warn'}". Here's a demo with more detailed examples.

Also note how the theme changes to the dark background contrast color (white) instead of the light background contrast color (black) on the darker backgrounds:

[oliversalzburg]

Seems like it gets complicated when trying to apply a style conditionally. 🤔

In my current approach (with custom CSS), I was simply using

ng-class="{'md-warn': vm.shouldWarn}"

I replaced that with

md-colors="{'color' : '{{vm.shouldWarn ? 'warn' : ''}}'}"

But now I get an error mdColors: couldn't find '' in the palettes. in the case where the style shouldn't be applied.

[Splaktar]

Here's a demo where there are two examples

• md-colors is used
• $mdColors.getThemeColor('warn') is used

Which style to pick depends upon how much logic you want in your template.

[oliversalzburg]

Awesome. Thank you so much for your effort.