bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.

[iKrishnaSahu]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We are getting error in below code -

@include mat.all-legacy-component-themes($theme);

$theme contains custom color palettes configuration which used to work properly in v14 without any warnings.

After migrating angular v14 to v15rc, we are getting following error (adding only one error as other errors are similar but with different css var color) -

[build:demothemes] WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.
[build:demothemes]     node_modules\@material\theme\_theme-color.scss 67:5                           tone()
    node_modules\@material\theme\_theme-color.scss 86:14                          contrast-tone()
    node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 123:10      using-mdc-theme()
    node_modules\@angular\material\button\_icon-button-theme.scss 13:3            color()
    node_modules\@angular\material\button\_icon-button-theme.scss 68:7            @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\button\_icon-button-theme.scss 62:3            theme()
    node_modules\@angular\material\datepicker\_datepicker-legacy-compat.scss 7:5  legacy-button-compat-theme()
    node_modules\@angular\material\legacy-button\_button-theme.scss 168:3         color()
    node_modules\@angular\material\legacy-button\_button-theme.scss 214:7         @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\legacy-button\_button-theme.scss 208:3         theme()
    node_modules\@angular\material\legacy-core\theming\_all-theme.scss 45:5       @content
    node_modules\@angular\material\core\theming\_theming.scss 402:3               private-check-duplicate-theme-styles()
    node_modules\@angular\material\legacy-core\theming\_all-theme.scss 43:3       all-legacy-component-themes()
    libs\prebuilt-themes\default.scss 125:1                                   @use
    libs\prebuilt-themes\default-css-vars.scss 5:1                            @use
    apps\ruf-app\src\app\custom-themes\default.scss 3:1                       root stylesheet

Reproduction

Steps to reproduce:

Expected Behavior

NA

Actual Behavior

NA

Environment

Angular: 15.0.0-rc.4 CDK/Material: 15.0.0-rc.3 Browser(s): Chrome Operating System (e.g. Windows, macOS, Ubuntu): Windows

[vpetrusevici]

Sorry for too much "spam". Just want to say I figured it out using separate vars for rgb/rgba wrapping. I still have some wornings related to var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone. but it's working. Here the PR for example, if smd else has this issue https://github.com/johannesjo/angular-material-css-vars/pull/104

[lousley]

Hi there

I have also the same problem as described above after update from material 14 to 15. In our application we use css variables like: --color-1: 10, 10, 10 and we use rgb function in palette definitions. This leads to the following errors:

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: rgb(var(--primary-color)) is not a color.
  ╷
9 │   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
  │                                    ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@angular/material/button/_button-theme-private.scss 9:36         -ripple-color()
  node_modules/@angular/material/button/_button-theme-private.scss 35:5         ripple-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 177:7                @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 193:5       @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 233:3       disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 192:3       using-mdc-theme()
  node_modules/@angular/material/button/_button-theme.scss 43:3                 color()
  node_modules/@angular/material/button/_button-theme.scss 216:7                @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 210:3                theme()
  node_modules/@angular/material/datepicker/_datepicker-legacy-compat.scss 6:5  legacy-button-compat-theme()
  node_modules/@angular/material/legacy-button/_button-theme.scss 168:3         color()
  node_modules/@angular/material/legacy-button/_button-theme.scss 214:7         @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/legacy-button/_button-theme.scss 208:3         theme()
  node_modules/@angular/material/legacy-core/theming/_all-theme.scss 45:5       @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/legacy-core/theming/_all-theme.scss 43:3       all-legacy-component-themes()
  projects/soe-angular/theme/index.scss 34:1                                    @import
  src/styles.scss 2:9                                                           root stylesheet

the button theme is the only one that can't handle rgb function. Because of this implementation in the _button-theme-private.scss file:

@mixin _ripple-color($color) {
  --mat-mdc-button-persistent-ripple-color: #{$color};
  --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
}

Our workaround is to define extra css variables in our branding file like this:

:root {
--color-1: 10,10,10;
.....
....
--color-1-rgb: rgb(var(--color-1));
}

and change variable in palette defintions. Very Very ugly but it works :)

Is the idea to wait for the design of a new theming system based on CSS vars? Or will there still be a fix for the legacy variant as well?

[cristsr]

Is there any solution for this problem? I am having complications with dynamic themes in angular 15.

[LayZeeDK]

Upgrade to the latest Angular Material and you can compile your styles. Stay aware of text colors defaulting to black/dark. Add custom styles for other component styles that do not work well with CSS Custom Properties as theme colors.

[lousley]

Do you have an example for custom styles?

[LayZeeDK]

Anything that doesn't match the Angular Material documentation. For example, an MDC-based Determinate Progress bar using a CSS Custom Properties-based Angular Material theme will always show as filled and we must add a style to make the non-filled part stand out from the filled part of the Progress bar.

[LayZeeDK]

It should be possible for Angular Material to add a better CSS Custom Properties story since MDC Web accepts a Sass map describing a CSS Custom Property and a fallback value, something like

--mdc-some-property: (
  varname: my-css-custom-property,
  fallback: #c0ff33,
);

[Londeren]

Have the same issue for list module. Material 15.1.0

[rbalet]

@alorle I saw that you've closed the following merge request https://github.com/angular/components/pull/26017.

I do understand the reason, but was wondering if we could add a scss variable that:

1. is set true per default
2. When set to false, will ignore and not add the dark fall back.

This way, the user will be able to declare it before the rest & then it would avoid the fallback.

It's more a workaround, but I do think that a lot of person will be happy with the implementation.
We could add a message in the console that say that this isn't recommended.

What do you think ?

I'll be glad to make a pull request in case you'll accept this.

[julien-deruere]

here is my palette:

$primary: mat.define-palette((
  100: rgba(var(--color-primary), 0.1),
  500: rgba(var(--color-primary), 1),
  700: rgba(var(--color-primary), 1),
  contrast: (
    100: rgba(var(--color-primary-contrast), 1),
    500: rgba(var(--color-primary-contrast), 1),
    700: rgba(var(--color-primary-contrast), 1),
  )
))

I'm using @angular/material 15.1.5 and getting this error:

SassError: $color: rgba(var(--color-primary), 1) is not a color.
     ╷
75 │   @return rgba(mdc-theme-color.prop-value($palette), 0.87);
     │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/@angular/material/form-field/_form-field-native-select.scss 75:11              -get-focused-arrow-color()
  node_modules/@angular/material/form-field/_form-field-native-select.scss 110:20             @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 193:5                     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 233:3                     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 192:3                     using-mdc-theme()
  node_modules/@angular/material/form-field/_form-field-native-select.scss 79:3               private-form-field-native-select-color()
  node_modules/@angular/material/form-field/_form-field-theme.scss 53:7                       @content
  node_modules/@angular/material/form-field/_mdc-text-field-theme-variable-refresh.scss 56:3  private-text-field-refresh-theme-variables()
  node_modules/@angular/material/form-field/_form-field-theme.scss 46:5                       @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 193:5                     @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 233:3                     disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 192:3                     using-mdc-theme()
  node_modules/@angular/material/form-field/_form-field-theme.scss 45:3                       color()
  node_modules/@angular/material/form-field/_form-field-theme.scss 140:7                      @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3                             private-check-duplicate-theme-styles()
  node_modules/@angular/material/form-field/_form-field-theme.scss 134:3                      theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 49:5                            @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3                             private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3                            all-component-themes()
  src/custom/styles/partials/styles/_style-dark.scss 5:3                                        @import

[alorle]

@alorle I saw that you've closed the following merge request #26017.

I do understand the reason, but was wondering if we could add a scss variable that:

1. is set true per default
2. When set to false, will ignore and not add the dark fall back.

This way, the user will be able to declare it before the rest & then it would avoid the fallback.

It's more a workaround, but I do think that a lot of person will be happy with the implementation. We could add a message in the console that say that this isn't recommended.

What do you think ?

I'll be glad to make a pull request in case you'll accept this.

@rbalet sorry for the late reply. Feel free to make a PR. I'm afraid that right now I don't have the time to be able to look at this topic. Also, in my team, we have decided to wait for the official support of CSS variables. Like I said, feel free to take the work I proposed and improve it.

[nekkon]

Would be great to share if there is any progress on this issue. It is blocking our team to migrate to the new mdc version of the material components. We are also using the angular-material-css-vars for dynamic theming with CSS vars.

[richardsengers]

We have the same problem. Still not able to migrate to mdc. And to be honest,it doesn't feel like the Angular team is making a big deal out of this. It's awful quite. I mean look at the change logs every week. Not much bugs that are being picked up. I hope they will change my mind

[pkelleter]

Same here. Stuck with Angular 14 on all our projects due to this restriction. Very very sad when thinking about the huge leaps Angular itself has been making in the last months and will make in the months to come. Angular got momentum - and this bug is holding so many projects back :(

Is there any official roadmap for this to be tackled any time soon? I'm a bit worried since it seems there is no real alternative to waiting..

[Frankitch]

@tasbir49 I am also using dynamic theming and I did manage to upgrade to MDC components with a couple of minor scss hacks. But of course it depends on your applications :slightly_smiling_face:

[renatoaraujoc]

@tasbir49 I am also using dynamic theming and I did manage to upgrade to MDC components with a couple of minor scss hacks. But of course it depends on your applications :slightly_smiling_face:

Hey could you share a code example? I use tailwind + material... my colors are all css variables.

[lixaotec]

+1

[Frankitch]

@tasbir49 @renatoaraujoc sorry for the late answer, actually it depends on the components and the problems you are facing. I I have faced several issues and for each issue it was a different "solution". For example, I have given a workaround for this particular issue.

By the way I am also using tailwind + material.

[wagnermaciel]

Hi, this does look like an example of Hyrum's law. We never officially supported this but it appears a good number of users have ended up depending on it. I rediscussed this with the team and the current plan is still to roll forward and let this be resolved by the new token-based theming api. Our reason for this is that the rollout of the new api is our best real solution to actually supporting this behavior. It also resolves multiple other issues and provides users with a much better supported solution for customizing component styles

[pkelleter]

Good to hear that there will be a solution eventually, thanks @wagnermaciel

Is there any observable roadmap you know of, regarding this token-based theming api or related issue or whatever to keep track of it?

[richardsengers]

Can someone explain to me what Token-based theming APIs mean?

[json-derulo]

@pkelleter see the official roadmap.

[richardsengers]

@json-derulo "Future: To provide better customization of our Angular material components and enable Material 3 capabilities, we'll be collaborating with Google's Material Design team on defining token-based theming APIs."

That's pretty vague to be honest :-)

[michaelfaith]

https://m3.material.io/foundations/design-tokens/overview

[lubowiecki]

Will it be possible to use CSS variable as a value of design token?

[rogeriopgp]

I had the same issue here after upgrading from 14 to 15. Now we downgraded to 14 and will wait for a solution.

[mlgr-io]

+1

[TavaresW-lima]

+1 Really looking forward for this one

[dinbtechit]

+1

[Enngage]

I had the same issue here after upgrading from 14 to 15. Now we downgraded to 14 and will wait for a solution.

Why do you need to wait? I mean, you can always just override the CSS. We did it and worked just fine. Yeah, it's not ideal, but nothing that should stop you from upgrading to Angular 15 and especially now 16.

[richardsengers]

@Enngage the problem here is that we can't. Most of us have customers who can create theme's by themselves which are stored in a database.

@wagnermaciel we get a lot of questions from customers why we are not updating. Do you think the new token based api will be released in v16 or v17?

[rogeriopgp]

Why do you need to wait? I mean, you can always just override the CSS. We did it and worked just fine. Yeah, it's not ideal, but nothing that should stop you from upgrading to Angular 15 and especially now 16.

Hello Sr! Could you show the code for us? Is it best practice to solve that?

[Satno4]

here's the culprit @include mat.list-theme($app-light-theme); if you are not using this module, just apply themes individually for each component. here's the list: https://github.com/angular/components/blob/main/src/material/core/theming/_all-theme.scss the warnings should be gone

[Enngage]

@Enngage the problem here is that we can't. Most of us have customers who can create theme's by themselves which are stored in a database.

@wagnermaciel we get a lot of questions from customers why we are not updating. Do you think the new token based api will be released in v16 or v17?

Yes, you can. We're also storing customer themes in db. Just use the "default" colors instead of your own variables for the problematic modules so that you can build the project and then apply your own CSS overrides for the classes you need (the modules where you couldn't use the var). You can use var in these overrides. You can see the list of all classes in the post above. It's really easy to be honest, it's just overriding few material theme color styles.

[roland-vachter]

Any updates or plans for supporting CSS variables for Angular material theming? Dynamic theming is a real need and it should be supported.

[worthy7]

In my opinion, before calling the "tone" function, AM should check if the value is actually a value or a css-variable. If it is a css variable, then use the defined contrast value instead.

[rogeriopgp]

Hello Srs!

I updated from v14 to v17 and everything work fine with variables. Anyone can confirm that?