I’m (finally) updating my Angular application to use Angular Material’s MDC components (in v15).

When switching the progress-bar from legacy to MDC, the bar appears as a solid color, regarding of the mode or the value set.

I went and looked at the example given in the documentation on stackblitz, forked it, and found that if I applied my custom theme, this issue was happening. Investigating further, I found that this is because I’m setting the palette of the primary of my custom theme to a variable, and not a direct color (if it’s set to the color directly, there’s no issue.).

Is there a way around that? We want to use variables in the custom theme so that we can insert different themes with css.

Would this be considered a bug for Angular Material?

Here’s my forked stackblitz example: https://stackblitz.com/edit/yepvp3?file=src%2Fcustom-theme.scss