@use '@angular/material' as mat;

@include mat.core();

$palette: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #3143a3,
  A400: #213083,
  A700: #10173f,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: black,
    A200: black,
    A400: black,
    A700: black,
  )
);

$dark-palette: mat.$amber-palette;
$light-palette: mat.$blue-grey-palette;

$typography: mat.define-typography-config(
  $font-family: 'Roboto, sans-serif',
  $headline-1: mat.define-typography-level(32px, 48px, 700),
  $body-1: mat.define-typography-level(16px, 24px, 400)
);

$dark-primary: mat.define-palette($dark-palette);
$dark-accent: mat.define-palette($dark-palette);
$dark-warn: mat.define-palette($dark-palette);

$dark-theme: mat.define-dark-theme((
 color: (
   primary: $dark-primary,
   accent: $dark-accent,
   warn: $dark-warn,
 ),
 typography: $typography,
 density: 0,
));

// Define a light theme
$light-primary: mat.define-palette($light-palette);
$light-accent: mat.define-palette($light-palette);
$light-warn: mat.define-palette($light-palette);

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

.mat-color-scheme-light{
  @include mat.all-component-themes($light-theme);
}
.mat-color-scheme-dark{
  @include mat.all-component-themes($dark-theme);
}