Reputation: 121
Hi with the new update from angular material they changed how the theming works. I followed the tutorial on the Angular Material website and added a pallet defined my primary/accent color and apply that:
$lightBlue-palette: (
50: #f1f7f7,
100: #d4f0f8,
200: #a4e3f0,
300: #6dc7da,
400: #08badd,
500: #2687a2,
600: #216e88,
700: #1d536a,
800: #16384d,
900: #0e2335,
contrast: (
50: rgba(black, 0.87),
100: rgba(black, 0.87),
200: rgba(black, 0.87),
300: white,
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
)
);
$my-primary: mat.define-palette($lightBlue-palette, 400);
$my-accent: mat.define-palette($lightBlue-palette, 900);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: mat.$red-palette
),
typography: mat.define-typography-config(),
density: 0,
));
@include mat.all-component-themes($my-theme);
like it is told in the docs. But then I get this error:
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: null 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 43: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 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/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()
src/custom-theme.scss 55:1 root stylesheet
I know the update is brand new but I have no clue what they want from me and the error also docent really help me.
I tried to follow the docs from Angular Material
Upvotes: 3
Views: 3466
Reputation: 121
I found after long time on an other project the solution. :D
I used this Website to generate my theme. sadly they are not up to date and don't implement @include mat.core();
correctly.
to fix it there is in the generated code the mat.core($fontConfig)
delete the $fontConfig
and move the mat.core()
up to your code reload Application and done. :|
Also if your @use
is not '@angular/material' as mat
you need to change that too.
I hope this help for future people who come across this thread.
Upvotes: 0
Reputation: 33
Check wherever you have loaded your material components (it can be placed at app.module.ts or a different file) that you don't have the legacy versions of these components. Usually marked as imports from angular material but with the legacy prefix. suc as import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy/card';
Upvotes: 2