82 lines
1.6 KiB
SCSS
82 lines
1.6 KiB
SCSS
@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);
|
|
}
|