For integrate with material colors theming, you can assign the generated variables to theme on your styles file:
@use "@angular/material" as mat;
@include mat.core();
$primary: (
default: var(--color-primary),
lighter: var(--color-primary-light),
darker: var(--color-primary-dark),
text: var(--color-primary),
default-contrast: var(--color-primary-contrast),
lighter-contrast: var(--color-primary-light-contrast),
darker-contrast: var(--color-primary-dark-contrast)
);
$accent: (
default: var(--color-secondary),
lighter: var(--color-secondary-light),
darker: var(--color-secondary-dark),
text: var(--color-secondary),
default-contrast: var(--color-secondary-contrast),
lighter-contrast: var(--color-secondary-light-contrast),
darker-contrast: var(--color-secondary-dark-contrast)
);
// Define a light theme
$light-theme: mat.define-light-theme(
(
color: (
primary: $primary,
accent: $accent
)
)
);
@include mat.core-color($light-theme);