Theme color hue values for MdProgressSpinner, MdProgressBar are hardcoded

[willshowell]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

If my theme warn color is defined as:

$theme-warn: mat-palette($mat-amber, 800);

I would expect my use of the spinner to reflect the 800 hue of amber:

<md-spinner color="warn" mode="indeterminate"></md-spinner>

What is the current behavior?

The 600 hue is always used for MdProgressSpinner.

The 600/100 hues are always used for MdProgressBar. mat-color($primary, lighter) should be used instead of 100.

[russelltrafford]

I noticed this also happens for md-chip and md-slide-toggle, as well as the progress ones you mention. Can you confirm md components that the hue does work on, so I can check this is not my config?
Then again, my theme file is pretty basic, cant see what I would be doing wrong:

$my-app-primary: mat-palette($mat-indigo);
$my-app-accent:  mat-palette($mat-teal, A200, A100, A400);

I also tried it for indigo and primary, and none of them work, it just defaults to the indigo 500.

[willshowell]

Yeah I think you should be seeing the same issue for chips and slide-toggles. There are several hardcoded colors for the chips, but that component is still very much in development (#2476) so I can kind of understand why.

The slide toggle is a little different. You can see from here that the material spec actually defines specific hues to be used. This was an explicit change in #1612, so I'd expect it's here to stay.

[russelltrafford]

@willshowell nice quick reply!
Can you suggest a component where custom hue etc IS properly used as per the custom theme?
I REALLY want to see if this something on my end, or the same as what you are experiencing.

In the meantime, is there a way to maybe pass an actual hex colour to the theme, rather than having to use the palette? Just temporarily. Otherwise we might need to ditch using the material design theming alltogether until its fixed, which I dont want to have to do.

[willshowell]

@russelltrafford Yeah try <md-toolbar color="accent"></md-toolbar>. It should show the correct hue.

I'm not totally sure what you want to do for your workaround. You can pretty easily override components styling like this:

@import '@angular/material/theming';

$primary: map-get($theme, primary);

.my-override {
  background-color: mat-color($primary);
}

Concerning using non-palette colors, I think you can do something like this (though I haven't tested):

$my-primary: #abcdef;
$my-accent: #123456;

$my-custom-theme: mat-light-theme($my-primary, $my-accent);

[russelltrafford]

OK, I can confirm I am having the same issues as you, and its not my local implementation, but indeed a material2 code bug.

Screenshot below shows the wrong colour hues for everything except the md-toolbar:

Can we update the issue title to something like 'Custom theme Color Hue values of MdProgressSpinner, MdProgressBar are hardcoded' to allow others to find it more easily. I would not have immediately thought to search for just 'hue'

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}