How to change Background Color of mat-chip of Angular Material 18

I dont understand the new Material theming.

How to make the background green?

<mat-chip class="make-green">
  Hello World
</mat-chip>

I read API Docs, with no success.

Theme color of the chip. This API is supported in M2 themes only, it has no effect in M3 themes.

For information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-color-variants.

So, Material 19 was released last night and changes this a bit. The M3 theming approach is still a little restrictive, for example you can't use hues any more, but it seems more intuitive and there is better access to be able to style individual properties.

The approach of changing a variable value is frowned upon:

Now the approach is to use mat.chips-overrides

In styles.scss

@use '@angular/material' as mat;

html {
    color-scheme: light dark;
    @include mat.theme((
        color: (
            primary: mat.$violet-palette,
            tertiary: mat.$magenta-palette
        ),
        typography: Roboto
    ));
}

In the component where you are using a mat-chip-set (or in the styles.scss if you want this to apply across the whole application)

@use '@angular/material' as mat;

mat-chip-set {
    @include mat.chips-overrides((
        outline-color: orange,
        disabled-outline-color: red
    ));
}

The result is:

The Angular Material documentation has been updated to include the available overrides. See https://material.angular.io/components/chips/styling

Obviously you need to be running Angular 19 for this to work.