theme.scss

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

// Define a dark theme
$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: mat.define-palette(mat.$blue-palette),
      accent: mat.define-palette(mat.$blue-gray-palette),
    ),
    // Only include `typography` and `density` in the default dark theme.
    typography: mat.define-typography-config(),
    density: -2,
  )
);

// Define a light theme
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$blue-palette),
      accent: mat.define-palette(mat.$blue-gray-palette),
    ),
  )
);

// Apply the dark theme by default// Apply the dark theme by default
@include mat.all-component-themes($dark-theme);

// Apply the light theme only when the user prefers light themes.
@media (prefers-color-scheme: light) {
  // Use the `-color` mixins to only apply color styles without reapplying the same
  // typography and density styles.
  @include mat.all-component-colors($light-theme);
}