css Question posted in
Some basic documentation can be found here.

Css – How to change code to use @use instead of @import

I am currently on the process of redoing out clubs app from Angular 9 to 18, since it has not been well maintained. I am trying to keep as much of the frontend as possible and therefore also wanted to keep the design more or less the same.

I have found the following code defining the themes of our app within this code:

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($material-primary);
$my-app-accent:  mat-palette($mat-pink, 500, 900, A100);
$my-app-warn:    mat-palette($mat-red);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

This can be found in the colours.scss, which is referenced in the styles.scss of our old app. I wanted to keep all of it intact, but since Angular 17 the use of @import ist no longer possible, and I am supposed to use @use (like in this ticket: https://github.com/angular/components/issues/28204)

I have tried to change the code myself and with the help of ChatGPT came up with this:

@use '@angular/material' as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, 500, 900, 'A100');
$my-app-warn: mat.define-palette(mat.$red-palette);

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

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

Unfortunatelly it does not work and I get the following error: "Unknown Function: ‘define-palete’", etc.

Does anyone have a clue, what the right syntax is? Even the tutorials provided by Angular still reference the old system: https://v7.material.angular.io/guide/theming

Tags:

2

Answers


  1. 0

    Your Angular 9 app is using Material 2, which is no longer the default. Here is the right syntax for Angular Material 18 using Material 3:

    @use '@angular/material' as mat;

@include mat.core();

$my-theme: mat.define-theme((
    color: (
    theme-type: light,
    primary: mat.$violet-palette,
  ),
));

html {
  @include mat.all-component-themes($my-theme);
}
    Login or Signup to reply.
  2. 0

    This may help,
    should work with Angular Material 18:

    @use '@angular/material' as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette);

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

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

    Key changes and explanations:

    1. We use @use '@angular/material' as mat; to import the Material styles and assign them the namespace mat.

    2. The palette definitions use mat.define-palette() and access the predefined palettes via mat.$color-palette.

    3. For the accent palette, I’ve used the standard Material Design recommendation for accent colors (A200, A100, A400). You can adjust these if needed.

    4. The theme is defined using mat.define-light-theme() with an object structure for better readability and future extensibility.

    5. Finally, we include all component themes with mat.all-component-themes($my-app-theme).

    Additional considerations:

    • If you’re using custom colors, you may need to define custom palettes. For example:

      $custom-primary: (
  50: #e8eaf6,
  100: #c5cae9,
  // ... other shades
  500: #3f51b5,  // main shade
  // ... continue with other shades
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    // ... other contrasts
  )
);
$my-app-primary: mat.define-palette($custom-primary);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search