Why is my custom theme in Angular not recognized?

Question

I created the file "custom-theme.scss" in the src-folder with this code:

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$light-blue-palette, 500);
$my-accent: mat.define-palette(mat.$light-blue-palette, 500);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

In styles.scss I imported the custom theme and commented the prebuilt theme out:

//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import 'custom-theme.scss';

I have no compilation errors and the browser still uses the deeppurple prebuilt theme. Why?

I have already rebuilt and restarted everything.