Issue
I am trying to define a custom theme for my Angular project. I am using: Node 18.18.2 npm 10.2.1 Angular 16.2.10 (Angular CLI: 16.2.8)
I have tried to follow the Angular Material theming guide: https://material.angular.io/guide/theming
Here is my custom theme file: src/csn-theme.scss:
@use '@angular/material' as mat;
@include mat.core();
$primary-palette: (
50: rgba(113, 120, 227, 0.1),
100: rgba(113, 120, 227, 0.2),
200: rgba(113, 120, 227, 0.4),
300: rgba(113, 120, 227, 0.6),
400: rgba(113, 120, 227, 0.8),
500: rgb(113, 120, 227),
600: rgba(85, 90, 171),
700: rgba(57, 60, 115),
800: rgba(28, 30, 59),
900: rgba(1, 1, 1),
A100: rgba(113, 120, 227, 0.2),
A200: rgba(113, 120, 227, 0.4),
A400: rgba(113, 120, 227, 0.8),
A700: rgba(57, 60, 115),
contrast: (50: rgb(34, 34, 34),
100: rgb(34, 34, 34),
200: rgb(34, 34, 34),
300: rgb(34, 34, 34),
400: rgb(34, 34, 34),
500: rgb(34, 34, 34),
600: white,
700: white,
800: white,
900: white,
A100: rgb(34, 34, 34),
A200: rgb(34, 34, 34),
A400: rgb(34, 34, 34),
A700: white)
);
$accent-palette: (
50: rgba(169, 58, 191, 0.1),
100: rgba(169, 58, 191, 0.2),
200: rgba(169, 58, 191, 0.4),
300: rgba(169, 58, 191, 0.6),
400: rgba(169, 58, 191, 0.8),
500: rgba(169, 58, 191),
600: rgb(127, 58, 144),
700: rgb(85, 44, 97),
800: rgb(43, 30, 50),
900: rgb(1, 1, 1),
A100: rgba(169, 58, 191, 0.2),
A200: rgba(169, 58, 191, 0.4),
A400: rgba(169, 58, 191, 0.8),
A700: rgb(85, 44, 97),
contrast: (50: rgb(34, 34, 34),
100: rgb(34, 34, 34),
200: rgb(34, 34, 34),
300: rgb(34, 34, 34),
400: white,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: rgb(34, 34, 34),
A200: rgb(34, 34, 34),
A400: white,
A700: white)
);
$csn-primary: mat.define-palette($primary-palette, 500);
$csn-accent: mat.define-palette($accent-palette, 500, A200, A700);
$csn-theme: mat.define-light-theme((color: (primary: $primary-palette,
accent: $accent-palette ),
density: 0,
));
$color-config: mat.get-color-config($csn-theme);
@include mat.core-theme($csn-theme);
@include mat.button-theme($csn-theme);
:root {
--primary: #7178E3;
--accent: #A83ABF;
--warn: $mat-red;
--primaryContrast: rgb(34, 34, 34);
}
Here is the styles section of my angular.json file:
"styles": [
"@angular/material/prebuilt-themes/indigo-pink.css",
"src/csn-theme.scss",
"src/styles.scss"
],
When I try to build the application running ng serve, I receive the following error.
./src/csn-theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$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 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 178:5 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 246:3 disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 177: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 403:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\button\_button-theme.scss 210:3 theme()
src\csn-theme.scss 80:1 root stylesheet
./src/csn-theme.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):
$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 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 178:5 @content
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 246:3 disable-mdc-fallback-declarations()
node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 177: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 403:3 private-check-duplicate-theme-styles()
node_modules\@angular\material\button\_button-theme.scss 210:3 theme()
src\csn-theme.scss 80:1 root stylesheet
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
× Failed to compile.
I am somewhat inexperienced with the syntax of scss, however I am able to determine that the error occurs because the value returned by prop-value function in '@material/theme/theme-color' for the parameter of "primary" is null... and null is not a color.
If I remove @include mat.button-theme($csn-theme);
from my scss file then the build passes. The problem is generated when trying to configure the ripples styling as part of the button config I think.
Would anyone be able to help me out?
I have tried placing some temporary @debug statements into the node_modules files and was able identify the cause of the problem at the very highest level, but beyond that I don't know what I am doing!
Ultimately I am expecting to have a custom theme configured which uses the 2 colors I have specified in my scss file as the primary and accent colors for all relevant components.
Solution
You have to provide mat palettes when creating the mat theme. But you are currently providing your own palette / color description
$primary-colors: (
50: rgba(113, 120, 227, 0.1),
100: rgba(113, 120, 227, 0.2),
// etc
);
$accent-colors: (
50: rgba(169, 58, 191, 0.1),
100: rgba(169, 58, 191, 0.2),
// etc
);
$csn-primary-palette: mat.define-palette($primary-colors, 500);
$csn-accent-palette: mat.define-palette($accent-colors, 500, A200, A700);
// provide mat palettes, not the colors
$csn-theme: mat.define-light-theme((color: (primary: $csn-primary-palette,
accent: $csn-accent-palette ),
density: 0,
));
Answered By - Grogu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.