You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.2 KiB
SCSS
61 lines
2.2 KiB
SCSS
@import './color-swatches/purple-primary.swatch.scss';
|
|
@import './color-swatches/white-accent.swatch.scss';
|
|
@import './color-swatches/blue-primary.swatch.scss';
|
|
@import '~@angular/material/theming';
|
|
@include mat-core();
|
|
|
|
$custom-light-theme-background: (
|
|
status-bar: map_get($mat-grey, 300),
|
|
app-bar: map_get($mat-grey, 100),
|
|
background:map_get($mat-gray, 100),
|
|
hover: rgba(black, 0.04),
|
|
card: map_get($mat-gray, 100),
|
|
dialog: map_get($mat-gray, 100),
|
|
disabled-button: rgba(black, 0.12),
|
|
raised-button: map_get($mat-grey, 50),
|
|
focused-button: $dark-focused,
|
|
selected-button: map_get($mat-grey, 300),
|
|
selected-disabled-button: map_get($mat-grey, 400),
|
|
disabled-button-toggle: map_get($mat-grey, 200),
|
|
unselected-chip: map_get($mat-grey, 300),
|
|
disabled-list-option: map_get($mat-grey, 200),
|
|
);
|
|
|
|
$custom-light-theme-foreground: (
|
|
base: black,
|
|
divider: $dark-dividers,
|
|
dividers: $dark-dividers,
|
|
disabled: $dark-disabled-text,
|
|
disabled-button: rgba(black, 0.26),
|
|
disabled-text: $dark-disabled-text,
|
|
hint-text: $dark-disabled-text,
|
|
secondary-text: $dark-secondary-text,
|
|
icon: rgba(black, 1),
|
|
icons: rgba(black, 1),
|
|
text: rgba(black, 1),
|
|
slider-min: rgba(black, 1),
|
|
slider-off: rgba(black, 0.5),
|
|
slider-off-active: rgba(black, 0.6),
|
|
);
|
|
|
|
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {
|
|
@return (
|
|
primary: $primary,
|
|
accent: $accent,
|
|
warn: $warn,
|
|
is-dark: false,
|
|
foreground: $custom-light-theme-foreground,
|
|
background: $custom-light-theme-background
|
|
);
|
|
}
|
|
|
|
$teal-light-primary: mat-palette($mat-teal, 800, 300, 900);
|
|
$teal-light-accent: mat-palette($mat-amber, A200, A100, A700);
|
|
$teal-light-warn: mat-palette($mat-red, A200);
|
|
$teal-light-theme: create-custom-theme($teal-light-primary, $teal-light-accent, $teal-light-warn);
|
|
|
|
$alternate-teal-light-primary: mat-palette($blue-primary, 500, 300, 900);
|
|
$alternate-teal-light-accent: mat-palette($white-accent, 800, 600, 900);
|
|
$alternate-teal-light-warn: mat-palette($mat-red);
|
|
$alternate-teal-light-theme: mat-dark-theme($alternate-teal-light-primary, $alternate-teal-light-accent, $alternate-teal-light-warn);
|