AngularJS材质设计：活动选项卡使用不同的颜色（使用主题颜色）

Question

Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs

works:

.md-tab.md-active
{
   background: green;
}

doesn't work:

.md-tab.md-active
{
   background: accent;
}

The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:

<div md-colors="{color: 'accent', background: 'green'}">My Text</div>

What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.

Answer 1

I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.