bug(theming): WARNING: var(--primary, #4bcd3e) is not a color. Falling back to "dark" tone. #25981
Labels
Comments
|
Can you post what your custom palette looks like? |
|
I'm getting error Dynamic theme is inspired by https://stackblitz.com/edit/angular-material-theming-playground?file=src%2Fstyles%2F_var.scss $dynamic-theme-primary: (
50 : var(--theme-primary-50),
100 : var(--theme-primary-100),
200 : var(--theme-primary-200),
300 : var(--theme-primary-300),
400 : var(--theme-primary-400),
500 : var(--theme-primary-500),
600 : var(--theme-primary-600),
700 : var(--theme-primary-700),
800 : var(--theme-primary-800),
900 : var(--theme-primary-900),
A100 : var(--theme-primary-A100),
A200 : var(--theme-primary-A200),
A400 : var(--theme-primary-A400),
A700 : var(--theme-primary-A700),
contrast: (
50: var(--theme-primary-contrast-50),
100: var(--theme-primary-contrast-100),
200: var(--theme-primary-contrast-200),
300: var(--theme-primary-contrast-300),
400: var(--theme-primary-contrast-400),
500: var(--theme-primary-contrast-500),
600: var(--theme-primary-contrast-600),
700: var(--theme-primary-contrast-700),
800: var(--theme-primary-contrast-800),
900: var(--theme-primary-contrast-900),
A100: var(--theme-primary-contrast-A100),
A200: var(--theme-primary-contrast-A200),
A400: var(--theme-primary-contrast-A400),
A700: var(--theme-primary-contrast-A700),
)
);Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--theme-primary-500) is not a color. Falling back to "dark" tone.
@material/theme/_theme-color.scss 67:5
tone()
@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/progress-bar/_progress-bar-theme.scss 26:3 color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3
private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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()
@import
src/scss/styles.scsWarning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
var(--theme-primary-500) is not a color. Falling back to "dark" tone.
@material/theme/_theme-color.scss 67:5 tone()
@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/card/_card-theme.scss 16:3 color()
node_modules/@angular/material/card/_card-theme.scss 70:7 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules/@angular/material/card/_card-theme.scss 64:3 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 46: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/scss/styles.scss root stylesheet |
|
Progress-bar tries to do: ./src/scss/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--theme-primary-500) is not a color.
╷
16 │ track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18 -palette-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3 color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3
private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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/scss/my-theme.scss 88:1 @import
src/scss/styles.scss 2:9 root stylesheet
./src/scss/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: var(--theme-primary-500) is not a color.
╷
16 │ track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 16:18 -palette-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 28:7 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5 @content
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3 disable-mdc-fallback-declarations()
node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3 using-mdc-theme()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 26:3 color()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 53:7 @content
node_modules/@angular/material/core/theming/_theming.scss 402:3 private-check-duplicate-theme-styles()
node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 47:3 theme()
node_modules/@angular/material/core/theming/_all-theme.scss 47: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/scss/my-theme.scss 88:1 @import
src/scss/styles.scss 2:9 root stylesheet |
|
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../src/scss/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/scss/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.
To preserve current behavior: $weight * 1%
More info: https://sass-lang.com/d/function-units
@material/slider/_slider-theme.scss 77:5
@use
node_modules/@angular/material/slider/_slider-theme.scss 3:1
@use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1 @forward
@angular/_index.scss 18:1
@use
src/scss/my-theme.scss 3:1
@import
src/scss/styles.scss 2:9
root stylesheetUpdate: This warning is now gone (in 15.0.1). So basically only the |
|
Below is my color palette - |
1 task
|
We are having the same issues after upgrading to v15. |
|
Same behaviour here with following @use '@angular/material' as mat;
@use "sass:map";
// Include the core Angular Material styles
@include mat.core();
// Create a base theme without color.
// This will globally set the density and typography for all future color themes.
@include mat.all-component-themes((
color: null,
density: -2,
typography: mat.define-typography-config(
$font-family: theme('fontFamily.sans'),
)
));
:root {
--primary: #3f51b5;
--primary-50: #fefeff;
--primary-100: #c6cbeb;
--primary-200: #9ca6dd;
--primary-300: #6776ca;
--primary-400: #5062c2;
--primary-500: #3f51b5;
--primary-600: #37479e;
--primary-700: #2f3d88;
--primary-800: #273371;
--primary-900: #1f285a;
--primary-A100: #f7f8fc;
--primary-A200: #abb4e2;
--primary-A400: #606fc7;
--primary-A700: #4d5ec1;
--on-primary: #ffffff;
--on-primary-50: #000000;
--on-primary-100: #000000;
--on-primary-200: #000000;
--on-primary-300: #000000;
--on-primary-400: #ffffff;
--on-primary-500: #ffffff;
--on-primary-600: #ffffff;
--on-primary-700: #ffffff;
--on-primary-800: #ffffff;
--on-primary-900: #ffffff;
--on-primary-A100: #000000;
--on-primary-A200: #000000;
--on-primary-A400: #000000;
--on-primary-A700: #ffffff;
--accent: #e91e63;
--accent-50: #ffffff;
--accent-100: #facada;
--accent-200: #f597b7;
--accent-300: #ee568a;
--accent-400: #ec3a76;
--accent-500: #e91e63;
--accent-600: #d41556;
--accent-700: #b8124a;
--accent-800: #9c0f3f;
--accent-900: #800d34;
--accent-A100: #ffffff;
--accent-A200: #f7a9c4;
--accent-A400: #ee4c83;
--accent-A700: #eb3573;
--on-accent: #000000;
--on-accent-50: #000000;
--on-accent-100: #000000;
--on-accent-200: #000000;
--on-accent-300: #000000;
--on-accent-400: #000000;
--on-accent-500: #000000;
--on-accent-600: #ffffff;
--on-accent-700: #ffffff;
--on-accent-800: #ffffff;
--on-accent-900: #ffffff;
--on-accent-A100: #000000;
--on-accent-A200: #000000;
--on-accent-A400: #000000;
--on-accent-A700: #000000;
--warn: #e91e63;
--warn-50: #ffffff;
--warn-100: #facada;
--warn-200: #f597b7;
--warn-300: #ee568a;
--warn-400: #ec3a76;
--warn-500: #e91e63;
--warn-600: #d41556;
--warn-700: #b8124a;
--warn-800: #9c0f3f;
--warn-900: #800d34;
--warn-A100: #ffffff;
--warn-A200: #f7a9c4;
--warn-A400: #ee4c83;
--warn-A700: #eb3573;
--on-warn: #000000;
--on-warn-50: #000000;
--on-warn-100: #000000;
--on-warn-200: #000000;
--on-warn-300: #000000;
--on-warn-400: #000000;
--on-warn-500: #000000;
--on-warn-600: #ffffff;
--on-warn-700: #ffffff;
--on-warn-800: #ffffff;
--on-warn-900: #ffffff;
--on-warn-A100: #000000;
--on-warn-A200: #000000;
--on-warn-A400: #000000;
--on-warn-A700: #000000;
}
// Generate Primary, Accent and Warn palettes
$palettes: ();
@each $name in (primary, accent, warn) {
$palettes: map.merge($palettes, (#{$name}: (
50: var(--#{$name}-50),
100: var(--#{$name}-100),
200: var(--#{$name}-200),
300: var(--#{$name}-300),
400: var(--#{$name}-400),
500: var(--#{$name}-500),
600: var(--#{$name}-600),
700: var(--#{$name}-700),
800: var(--#{$name}-800),
900: var(--#{$name}-900),
contrast: (
50: var(--on-#{$name}-50),
100: var(--on-#{$name}-100),
200: var(--on-#{$name}-200),
300: var(--on-#{$name}-300),
400: var(--on-#{$name}-400),
500: var(--on-#{$name}-500),
600: var(--on-#{$name}-600),
700: var(--on-#{$name}-700),
800: var(--on-#{$name}-800),
900: var(--on-#{$name}-900)
),
default: var(--#{$name}),
lighter: var(--#{$name}-100),
darker: var(--#{$name}-700),
text: var(--#{$name}),
default-contrast: var(--on-#{$name}),
lighter-contrast: var(--on-#{$name}-100),
darker-contrast: var(--on-#{$name}-700)
)));
}
// ...
// Generate Angular Material themes. Since we are using CSS Custom Properties,
// we don't have to generate a separate Angular Material theme for each color
// set. We can just create one light and one dark theme and then switch the
// CSS Custom Properties to dynamically switch the colors.
body.light,
body .light {
$light-theme: mat.define-light-theme((color: ($palettes)));
// Use all-component-colors to only generate the colors
@include mat.all-component-colors($light-theme);
}
body.dark,
body .dark {
$dark-theme: mat.define-dark-theme((color: ($palettes)));
// Use all-component-colors to only generate the colors
@include mat.all-component-colors($dark-theme);
}
// ...When running I can perform a simpler test later to simplify the example. |
|
Same issue here after updating to Angular Material 15, I'm using CSS variables as well to allow for a dynamic theme. $primary-color: var(--primary-color);
$primary-contrast-color: var(--primary-contrast-color);
$mpo-primary-palette: (
...
500: $primary-color,
...
contrast: (
...
500: $primary-contrast-color,
...
),
); |
|
Same here |
1 task
|
Same issue for me after upgrading to Angular 15.0.0 (with Angular Material 15.0.0). My app's color theme is customizable by a configuration loaded at runtime. As such, I set the theme to be based on CSS4 variables - eg: I then alter those variables at runtime. This used to work just fine, but now, Angular Material complains (at compile time) with this: |
|
I think this can only be resolved when material-components/material-components-web#4709 is resolved. |
|
I don't know about that. The referenced issue is 3.5 years old. And this just stopped working with Angular Material 15.0.0 |
|
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. |
|
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.
@mixin _palette-styles($color) {
// We can't set the `track-color` using `theme`, because it isn't possible for it to use a CSS
// variable since MDC's buffer animation works by constructing an SVG string from this color.
@include mdc-linear-progress-theme.theme-styles((
// TODO(crisbeto): the buffer color should come from somewhere in MDC, however at the time of
// writing, their buffer color is hardcoded to #e6e6e6 which both doesn't account for theming
// and doesn't match the Material design spec. For now we approximate the buffer background by
// applying an opacity to the color of the bar.
track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),
));
@include mdc-linear-progress-theme.theme((
active-indicator-color: mdc-theme-color.prop-value($color),
));
} |
|
Does Angular team plan any workaround or fix for this and we should wait or we should remove features with css vars? |
|
The CSS dynamic theming is not specific to the progress bar. So I guess this means I can't upgrade to Angular Material 15 until someone figures out another way. The dynamic theming is pretty generic so I don't see a way to "exclude" the progress bar. |
1 task
|
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 |
|
I've found only one solution at this moment. If you don't use progress-bar, then configure each component separately like this: But you still need to rewrite some styles, which can take some time. And I'm wondering if anyone tried to use material migration tool |
|
@NechiK I did try to run the migration script |
|
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. |
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,
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. |
crisbeto
added
P2
|
@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". By the way I am also using tailwind + material. |
|
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 |
|
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? |
|
Can someone explain to me what Token-based theming APIs mean? |
|
@pkelleter see the official roadmap. |
|
@json-derulo That's pretty vague to be honest :-) |
|
Will it be possible to use CSS variable as a value of design token? |
|
I had the same issue here after upgrading from 14 to 15. Now we downgraded to 14 and will wait for a solution. |
|
+1 |
|
+1 Really looking forward for this one |
|
+1 |
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. |
|
@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? |
Hello Sr! Could you show the code for us? Is it best practice to solve that? |
|
here's the culprit |
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 |
1 task
|
Any updates or plans for supporting CSS variables for Angular material theming? Dynamic theming is a real need and it should be supported. |
1 task
|
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. |
1 task
1 task
1 task
|
Hello Srs! I updated from v14 to v17 and everything work fine with variables. Anyone can confirm that? |
|
Closing since a duplicate of #29363 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
Is this a regression?
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);$themecontains 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) -
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
The text was updated successfully, but these errors were encountered: