121 lines
3.2 KiB
SCSS
121 lines
3.2 KiB
SCSS
@use '@angular/material' as mat;
|
|
|
|
$dark-primary-text: rgba(black, 0.87);
|
|
$light-primary-text: white;
|
|
|
|
$mat-css-dark-theme-selector: '.theme-dark';
|
|
|
|
$gf-primary: (
|
|
50: var(--gf-theme-primary-50),
|
|
100: var(--gf-theme-primary-100),
|
|
200: var(--gf-theme-primary-200),
|
|
300: var(--gf-theme-primary-300),
|
|
400: var(--gf-theme-primary-400),
|
|
500: var(--gf-theme-primary-500),
|
|
600: var(--gf-theme-primary-600),
|
|
700: var(--gf-theme-primary-700),
|
|
800: var(--gf-theme-primary-800),
|
|
900: var(--gf-theme-primary-900),
|
|
A100: var(--gf-theme-primary-A100),
|
|
A200: var(--gf-theme-primary-A200),
|
|
A400: var(--gf-theme-primary-A400),
|
|
A700: var(--gf-theme-primary-A700),
|
|
contrast: (
|
|
50: $dark-primary-text,
|
|
100: $dark-primary-text,
|
|
200: $dark-primary-text,
|
|
300: $light-primary-text,
|
|
400: $light-primary-text,
|
|
500: $light-primary-text,
|
|
600: $light-primary-text,
|
|
700: $light-primary-text,
|
|
800: $light-primary-text,
|
|
900: $light-primary-text,
|
|
A100: $dark-primary-text,
|
|
A200: $light-primary-text,
|
|
A400: $light-primary-text,
|
|
A700: $light-primary-text
|
|
)
|
|
);
|
|
|
|
$gf-secondary: (
|
|
50: var(--gf-theme-secondary-50),
|
|
100: var(--gf-theme-secondary-100),
|
|
200: var(--gf-theme-secondary-200),
|
|
300: var(--gf-theme-secondary-300),
|
|
400: var(--gf-theme-secondary-400),
|
|
500: var(--gf-theme-secondary-500),
|
|
600: var(--gf-theme-secondary-600),
|
|
700: var(--gf-theme-secondary-700),
|
|
800: var(--gf-theme-secondary-800),
|
|
900: var(--gf-theme-secondary-900),
|
|
A100: var(--gf-theme-secondary-A100),
|
|
A200: var(--gf-theme-secondary-A200),
|
|
A400: var(--gf-theme-secondary-A400),
|
|
A700: var(--gf-theme-secondary-A700),
|
|
contrast: (
|
|
50: $dark-primary-text,
|
|
100: $dark-primary-text,
|
|
200: $dark-primary-text,
|
|
300: $light-primary-text,
|
|
400: $light-primary-text,
|
|
500: $light-primary-text,
|
|
600: $light-primary-text,
|
|
700: $light-primary-text,
|
|
800: $light-primary-text,
|
|
900: $light-primary-text,
|
|
A100: $dark-primary-text,
|
|
A200: $light-primary-text,
|
|
A400: $light-primary-text,
|
|
A700: $light-primary-text
|
|
)
|
|
);
|
|
|
|
$gf-typography: mat.m2-define-typography-config();
|
|
|
|
// Create default theme
|
|
$gf-theme-default: mat.m2-define-light-theme(
|
|
(
|
|
color: (
|
|
accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
|
|
primary: mat.m2-define-palette($gf-primary)
|
|
),
|
|
density: -3,
|
|
typography: $gf-typography
|
|
)
|
|
);
|
|
|
|
@include mat.all-component-themes($gf-theme-default);
|
|
|
|
// Create dark theme
|
|
$gf-theme-dark: mat.m2-define-dark-theme(
|
|
(
|
|
color: (
|
|
accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
|
|
primary: mat.m2-define-palette($gf-primary)
|
|
),
|
|
density: -3,
|
|
typography: $gf-typography
|
|
)
|
|
);
|
|
|
|
.theme-dark {
|
|
@include mat.all-component-colors($gf-theme-dark);
|
|
}
|
|
|
|
@include mat.button-density(0);
|
|
@include mat.core();
|
|
@include mat.table-density(-1);
|
|
|
|
:root {
|
|
--gf-theme-alpha-hover: 0.04;
|
|
--gf-theme-primary-500: #36cfcc;
|
|
--gf-theme-primary-500-rgb: 0, 187, 255;
|
|
--gf-theme-secondary-500: #3686cf;
|
|
--gf-theme-secondary-500-rgb: 78, 208, 94;
|
|
|
|
--mdc-filled-button-label-text-tracking: normal;
|
|
--mdc-outlined-button-label-text-tracking: normal;
|
|
--mdc-text-button-label-text-tracking: normal;
|
|
}
|