My IDE does not seem to be recognizing the material color variables. For each color variable (e.g. mat.$cyan-palette), I am getting an undeclared variable warning. I think this is because it is not recognizing the @include mat.core() statement. For this line, I am getting three warnings: Undeclared mixin, and two Unexpected character sequence.
I am a newbie for SCSS. Also, FYI I used https://theme-builder-1623190217839.web.app/ to create the theme below (fixing the mat.define-legacy-typography-config issue).
Here is my scss code:
@use '@angular/material' as mat;
// Be sure that you only ever include this mixin once!
@include mat.core();
// Define your theme with color palettes, typography and density
$mat-theme-primary-palette: map-merge(mat.$cyan-palette, ( contrast: (100: #150c4a,)));
$mat-theme-primary: mat.define-palette( $mat-theme-primary-palette, $default: 100, $lighter: 100, $darker: 700, $text: 500 );
$mat-theme-accent-palette: map-merge(mat.$teal-palette, ( 501: #4d77b6,contrast: (501: white,A100: white,A200: white,)));
$mat-theme-accent: mat.define-palette( $mat-theme-accent-palette, $default: 501, $lighter: A100, $darker: A200, $text: 600 );
$mat-theme-warn-palette: map-merge(mat.$pink-palette, ( ));
$mat-theme-warn: mat.define-palette( $mat-theme-warn-palette, $default: A200, $lighter: 500, $darker: 500, $text: A700 );
$mat-dark-theme-primary-palette: map-merge(mat.$lime-palette, ( contrast: (200: #030844,A100: rgba(0,0,0, 0.87),A700: rgba(0,0,0, 0.87),)));
$mat-dark-theme-primary: mat.define-palette( $mat-dark-theme-primary-palette, $default: 200, $lighter: A100, $darker: A700, $text: 700 );
$mat-dark-theme-accent-palette: map-merge(mat.$green-palette, ( contrast: (A200: black,50: black,A400: black,)));
$mat-dark-theme-accent: mat.define-palette( $mat-dark-theme-accent-palette, $default: A200, $lighter: 50, $darker: A400, $text: A100 );
$mat-dark-theme-warn-palette: map-merge(mat.$pink-palette, ( contrast: (A100: black,100: white,)));
$mat-dark-theme-warn: mat.define-palette( $mat-dark-theme-warn-palette, $default: A100, $lighter: 100, $darker: A700, $text: 100 );
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
// Changed mat.define-typography-config to mat.define-legacy-typography-config (see: https://stackoverflow.com/questions/75670584/sasserror-after-update-angular-to-v15)
$mat-typography: mat.define-legacy-typography-config( $font-family: 'Rubik', $display-4: mat.define-typography-level($font-size: 96px, $font-weight: 300, $font-family: Rubik), $display-3: mat.define-typography-level($font-size: 60px, $font-weight: 500, $font-family: Rubik), $display-2: mat.define-typography-level($font-size: 48px, $font-weight: 500, $font-family: Rubik), $display-1: mat.define-typography-level($font-size: 34px, $font-weight: 500, $font-family: Rubik), $headline: mat.define-typography-level($font-size: 24px, $font-weight: 500, $font-family: Rubik), $title: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik), $subheading-2: mat.define-typography-level($font-size: 18px, $font-weight: 500, $font-family: Rubik), $subheading-1: mat.define-typography-level($font-size: 20px, $font-weight: 500, $font-family: Rubik), $body-2: mat.define-typography-level($font-size: 16px, $font-weight: 400, $font-family: Rubik), $body-1: mat.define-typography-level($font-size: 18px, $font-weight: 400, $font-family: Rubik), $caption: mat.define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: Rubik), $button: mat.define-typography-level($font-size: 16px, $font-weight: 500, $font-family: Rubik),
// Line-height must be unit-less fraction of the font-size.
$input: mat.define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: Rubik) );
$mat-density: 0;
// @include mat.elevation(
// $zValue: 12,
// $color: #000,
// $opacity: 0.5
// );
$mat-core-theme: mat.define-light-theme(( color: ( primary: $mat-theme-primary, accent: $mat-theme-accent, warn: $mat-theme-warn ), typography: $mat-typography, density: $mat-density ));
$mat-dark-theme: mat.define-dark-theme(( color: ( primary: $mat-dark-theme-primary, accent: $mat-dark-theme-accent, warn: $mat-dark-theme-warn, ) ));
@include mat.all-component-themes($mat-core-theme);
.dark-theme {
@include mat.all-component-colors($mat-dark-theme);
}
Here is my package.json:
{
"name": "scss",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/cdk": "^16.2.12",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/material": "^16.2.12",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.10",
"@angular/cli": "^16.2.10",
"@angular/compiler-cli": "^16.2.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}
}
I am using Visual Studio Community 2022, if that is important.
I have inspected @angular/material/_index.scss
- core is defined, via @forward './core/core' show core statement.
- $cyan-palette (as well as the other colors) are defined, via a @forward './core/theming/palette' show $red-palette, {...}, $cyan-palette statement.
Also
- I do not have node-sass (per an answer on Angular material: SassError: Invalid CSS after "@include mat": expected 1 selector or at-rule, was ".core();").
- I am not using ~ in front of @angular/material, as this is deprecated.
- I am not using @include mat-core(), as this is deprecated.