components: bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone.
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: 1. 2.
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
About this issue
- Original URL
- State: open
- Created 2 years ago
- Reactions: 77
- Comments: 87 (11 by maintainers)
Commits related to this issue
- Begin migration to mdc * Some blockers on theming, see https://github.com/angular/components/issues/25981 * Only done some, not all, components. — committed to equinor/oilmod-web by yusijs 2 years ago
- fix(material/core): better handling of css variables in theme palettes Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it happened... — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/core): better handling of css variables in theme palettes Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it happened... — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/core): better handling of css variables in theme palettes (#26260) Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it... — committed to angular/components by crisbeto 2 years ago
- fix(material/core): better handling of css variables in theme palettes (#26260) Technically we don't support theming using CSS variables, but the community has started depending on it anyway since it... — committed to angular/components by crisbeto 2 years ago
- fix(material/core): validate theme palettes Currently if a palette is passed directly into the theme without wrapping it in a `define-palette` call, we end up throwing a weird null pointer error down... — committed to crisbeto/material2 by crisbeto 2 years ago
- fix(material/core): validate theme palettes Currently if a palette is passed directly into the theme without wrapping it in a `define-palette` call, we end up throwing a weird null pointer error down... — committed to crisbeto/material2 by crisbeto a year ago
- fix(material/core): validate theme palettes Currently if a palette is passed directly into the theme without wrapping it in a `define-palette` call, we end up throwing a weird null pointer error down... — committed to crisbeto/material2 by crisbeto a year ago
It’s not just the palette values - I’m seeing breakage in regular colors as well (e.g card background). I would also have thought that given there is an open issue to support css variables you would work towards supporting it, and not make active changes to break it. The breaking happens primarily in your usage of sass’ color mixins (e.g _card-theme.scss,
outline-color: color.mix(mdc-theme-color.prop-value(on-surface),), which I think it’s odd to “blame” on the styling from MDC.That’s good to know, but can this be expected in this major, or would it need to wait several more majors? The issue I linked above talking about it is 5 years old, and for myself and my projects this is blocking our migration to angular 15.
I’ve merged in #26260 for the 15.0.3 release that should resolve most of the issues. It fixes all the compilation errors when passing in a CSS-variable-based theme both into the MDC and legacy components. Also all the warnings should be gone for the legacy components while there are ~4 warnings left for the MDC ones that we can’t do much about at the moment. When we switch the select, menu, list and autocomplete to the new token-based theming API, the warnings will go away.
To clarify: we never officially supported CSS variables as palette values, primarily because the theming system was written during the time when we had to support IE 11. Before the switch to MDC there were only 2-3 places that broke when provided with a CSS variable which were easy to fix so we fixed them. After the switch to MDC that’s no longer the case since a lot of the CSS comes from outside of our project.
That being said, we’re in the process of designing a new theming system that will be based on CSS variables.
We are having the same issues after upgrading to v15.
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.
Hi Angular community,
These are my observations regarding the use of CSS Custom Properties with Angular Material 15.0 palettes.
If our Angular Material palettes use CSS Custom Properties, the easiest path for migrating to Angular Material 15 is the following:
Overview of Angular Material 15 components
* Shared variant means that we will use the same variant for both legacy and MDC-based Angular Material setups as MDC for Web has no equivalent component. ** The Datepicker uses MDC-based Button and Icon button components and styles as described in the section Datepicker.
Datepicker
MDC-based Angular Material components
To use CSS Custom Properties with MDC-based Angular Material components, we must address style issues caused by (1) when our palette includes dark background colors.
We cannot use CSS Custom Properties with the MDC-based Paginator as described by (2).
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
From my tracing / understanding, a good chunk of warnings are coming from trying to calculate things like contrast colors at scss compile time, even though the contrasting colors should also be available in the palette color config (which presumably those of us using dynamic CSS vars have those as variables as well as the color). But those are just warnings that don’t prevent it from building, I just fear there may be places the wrong contrasting colors are ending up.
For things that actually are breaking, as a workaround I am either using the legacy component/mixin or attempting to emit overriding styles without calling the material mixin. In essence:
which seems to be ok for now with the caveat the associated (deprecated) legacy module is imported:
The other component I found so far that isn’t playing nicely is the slide-toggle. No compilation errors but renders using whatever the presumed initial colors/styles are.
Anyways, understood that using CSS vars in our theme configs was not officially supported by the angular material API (and the difficulties with integrating with the mdc sass). However, for those of us who had requirements of a dynamic theme where it was important enough to use CSS vars in our theme configs, I think we are looking for some advising on how to manage planning apps and upgrading to Angular 15. My initial thoughts/questions:
I’m getting error
var(--theme-primary-500) is not a color. It seems like we can’t use CSS variables anymore with Material themes?Dynamic theme is inspired by https://stackblitz.com/edit/angular-material-theming-playground?file=src%2Fstyles%2F_var.scss
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?
We are using this theme initialization since, I think, the very first Angular Material version.
We really need this fixed and supported since our applications make intensive use of dynamic, multi-theme features.
Thanks!
FWIW, there is a comment in the Angular Material source at the specific theme for the progress bar that causes this error, explicitly stating that it isn’t possible to use CSS variables.
src/material/progress-bar/_progress-bar-theme.scss:8-22Hello community, I’m using CSS variables in a large Angular app and unfortunately I’m stuck on the upgrade to A15 (sadly, it’s the first time that cannot upgrade).
I’m getting the “…is not a color. Falling back to “dark” tone.” warning all the time. However, the app works and it’s properly styled! But the warning appears all the time and makes unpleasant to work with it.
I appreciate that you’re designing a new theming system based on CSS vars. Nevertheless, on the meantime we need a workaround to skip those warnings, because the app works fine updated to A15.
Can you please help?
Any news about this issue would be really appreciated, because we are unable to upgrade to Angular 15 and like all previous Angular releases we would like to stay updated (from Angular 2 till Angular 14 we had no problems updating, this is the first Angular release which we cannot update)
Just wanted to pop in here and say that we’re seeing the same problem. I’m seeing it elsewhere as well (e.g card-theme, or wherever sass’ color-functions are used). We’re using the themes we build for 15-20 apps, so we’re kinda forced into remaining on angular 14 for now which kinda sucks…
I’m curious why the mdc-components were not rolled out either experimentally, or in a separate package (i.e
@angular/mdc) instead of pushing out a pretty big breaking change with no clear migration path.Hello,
I downgraded to version 14.2.7, I use CSS variables as well and this broke my app. Been for more than 3 hours trying to figure out the issue and then I found @LayZeeDK mastodon post on google search (seems like he quit twitter for good) which pointed to this issue.
Hoping for a fix 😄
Any updates or plans for supporting CSS variables for Angular material theming? Dynamic theming is a real need and it should be supported.
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…
I’ve installed Material 15.0.3 and worked like a charm! No more warnings. Many many thanks @crisbeto for your support.
Will it be possible to use CSS variable as a value of design token?
here is my palette:
I’m using @angular/material 15.1.5 and getting this error:
Does Angular team plan any workaround or fix for this and we should wait or we should remove features with css vars? I really need answer to plan project future. Thanks!
@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:
trueper defaultfalse, will ignore and not add thedarkfall 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.
If I temporarily replace the var(–theme-primary-500) with a static color such as #ff0000, the app compiles, but that breaks the dynamic theming feature, and a warning remains in the console.
Console warning: Deprecation $weight: Passing a number without unit % (60) is deprecated.
Update: This warning is now gone (in 15.0.1).
So basically only the
var(--theme-primary-500)is causing an error in progress-bar… (Using CSS variables for the other values 50-900 doesn’t cause any issues.)I had the same issue here after upgrading from 14 to 15. Now we downgraded to 14 and will wait for a solution.
@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 😃
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/104Also having this issue using css vars. I can’t see an official note if this is going to be resolved? I got the issue loading only the legacy component themes after doing a
ng update @angular/material@15Yes please, this would help so much… If it’s just one Error, I’m hoping you guys can add a legacy fallback to at least partially support using dynamic themes… We can always override styles if we need to until you are able to officially support it.
@GeorgeKnap See the Datepicker section in https://github.com/angular/components/issues/25981#issuecomment-1331902121.
You’re right @russcarver, themes defined with CSS variables stopped working with the latest version.
But also the latest version of @anuglar/material introduced migration of almost all components to MDC, in which https://github.com/material-components/material-components-web comes into play.
Same issue here after updating to Angular Material 15, I’m using CSS variables as well to allow for a dynamic theme.
https://m3.material.io/foundations/design-tokens/overview
@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.
Hey could you share a code example? I use tailwind + material… my colors are all css variables.
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:
the button theme is the only one that can’t handle rgb function. Because of this implementation in the _button-theme-private.scss file:
Our workaround is to define extra css variables in our branding file like this:
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?
Ok. I just changed my themes definition to this
and now i have only warning
var(--palette-primary-500) is not a color. Falling back to "dark" toneand colors still don’t work 😦Now it compiles without remove/merge logic, but with warning and still colors are not applied
Ok. I just removed all map-merge and map-remove rows and got old error
Same here, would be nice if the error in “_progress-bar-theme.scss” could be changed to a warning or fixed.
You are right, I’ve changed my comment a bit.
Same behaviour here with following
styles.scss:When running
ng servei got some errors:I can perform a simpler test later to simplify the example.