How to I make themes work with Angular 18 and Materials 3

i am having some issues understanding why I am getting these issues I have tried to follow numerous sessions, watched videos, but everything I found so-far depends on app.module.ts, which is not a default of angular 18 or downgrading to materials 2.

I am new to this and have already tried re-creating the app about 10 times

Here is the issue I am getting

src/styles.scss 5:11  root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
  1 │ @import 'src/styles.scss';

This is my styles.scss

@use '@angular/material' as mat;
@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);

$my-app-theme: mat.define-light-theme((
    color: (
        primary: $primary,
        accent: $accent,
    )
));

@include mat.all-component-themes($my-app-theme);

body {
   font-family: Roboto, "Helvetica Neue", sans-serif;
}

here is package.json

@angular/compiler": "^18.2.0",
  "@angular/core": "^18.2.0",
  "@angular/forms": "^18.2.0",
  "@angular/material": "^18.2.11",
  "@angular/platform-browser": "^18.2.0",
  "@angular/platform-browser-dynamic": "^18.2.0",
  "@angular/router": "^18.2.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.10"
},
"devDependencies": {
  "@angular-devkit/build-angular": "^18.2.10",
  "@angular/cli": "^18.2.10",
  "@angular/compiler-cli": "^18.2.0",
  "@types/jasmine": "~5.1.0",
  "jasmine-core": "~5.2.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.2.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",

Solution

M3 Approach (new style/latest):

When working with material 3, you cannot use mat.$indigo-palette and mat.$blue-palette, since they are m2 themes. Instead go for the m3 themes.

Theming.md

- `$red-palette`
- `$green-palette`
- `$blue-palette`
- `$yellow-palette`
- `$cyan-palette`
- `$magenta-palette`
- `$orange-palette`
- `$chartreuse-palette`
- `$spring-green-palette`
- `$azure-palette`
- `$violet-palette`
- `$rose-palette`

So the new format to use these themes will look like below.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$blue-palette,
      tertiary: mat.$magenta-palette,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  @include mat.all-component-themes($theme);
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

Stackblitz Demo

M2 Approach (old style):

If you want to continue using the m2-themes, then all you need to do is replace the methods like mat.define-palette with the prefixed mat.m2-define-palette. This also applies for the palettes: mat.$indigo-palette should be changed to mat.$m2-indigo-palette.

@use '@angular/material' as mat;
@include mat.core();

$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$accent: mat.m2-define-palette(mat.$m2-pink-palette);

$my-app-theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent,
    ),
  )
);

@include mat.all-component-themes($my-app-theme);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}