169 lines
4.9 KiB
SCSS
169 lines
4.9 KiB
SCSS
@use 'sass:map';
|
|
@use '@angular/material' as mat;
|
|
@use './material-theme-custom.scss' as custom-mat;
|
|
|
|
mat.$theme-ignore-duplication-warnings: true;
|
|
|
|
@include mat.core();
|
|
|
|
$picsur-primary: mat.define-palette(mat.$green-palette, 600, 100, 900);
|
|
$picsur-accent: mat.define-palette(mat.$blue-grey-palette, 600, 200, 800);
|
|
$picsur-warn: mat.define-palette(mat.$red-palette);
|
|
|
|
// Light Theme Text
|
|
$dark-text: #000000;
|
|
$dark-primary-text: rgba($dark-text, 0.87);
|
|
$dark-accent-text: rgba($dark-primary-text, 0.54);
|
|
$dark-disabled-text: rgba($dark-primary-text, 0.38);
|
|
$dark-dividers: rgba($dark-primary-text, 0.12);
|
|
$dark-focused: rgba($dark-primary-text, 0.12);
|
|
|
|
$mat-light-theme-foreground-palette: (
|
|
base: black,
|
|
divider: $dark-dividers,
|
|
dividers: $dark-dividers,
|
|
disabled: $dark-disabled-text,
|
|
disabled-button: rgba($dark-text, 0.26),
|
|
disabled-text: $dark-disabled-text,
|
|
elevation: black,
|
|
secondary-text: $dark-accent-text,
|
|
hint-text: $dark-disabled-text,
|
|
accent-text: $dark-accent-text,
|
|
icon: $dark-accent-text,
|
|
icons: $dark-accent-text,
|
|
text: $dark-primary-text,
|
|
slider-min: $dark-primary-text,
|
|
slider-off: rgba($dark-text, 0.26),
|
|
slider-off-active: $dark-disabled-text,
|
|
);
|
|
|
|
// Dark Theme text
|
|
$light-text: #ffffff;
|
|
$light-primary-text: $light-text;
|
|
$light-accent-text: rgba($light-primary-text, 0.7);
|
|
$light-disabled-text: rgba($light-primary-text, 0.5);
|
|
$light-dividers: rgba($light-primary-text, 0.12);
|
|
$light-focused: rgba($light-primary-text, 0.12);
|
|
|
|
$mat-dark-theme-foreground-palette: (
|
|
base: $light-text,
|
|
divider: $light-dividers,
|
|
dividers: $light-dividers,
|
|
disabled: $light-disabled-text,
|
|
disabled-button: rgba($light-text, 0.3),
|
|
disabled-text: $light-disabled-text,
|
|
elevation: black,
|
|
hint-text: $light-disabled-text,
|
|
secondary-text: $light-accent-text,
|
|
accent-text: $light-accent-text,
|
|
icon: $light-text,
|
|
icons: $light-text,
|
|
text: $light-text,
|
|
slider-min: $light-text,
|
|
slider-off: rgba($light-text, 0.3),
|
|
slider-off-active: rgba($light-text, 0.3),
|
|
);
|
|
|
|
// Background config
|
|
// Light bg
|
|
$light-background: #fafafa;
|
|
$light-bg-darker-5: darken($light-background, 5%);
|
|
$light-bg-darker-10: darken($light-background, 10%);
|
|
$light-bg-darker-20: darken($light-background, 20%);
|
|
$light-bg-darker-30: darken($light-background, 30%);
|
|
$light-bg-lighter-5: lighten($light-background, 5%);
|
|
$dark-bg-tooltip: lighten(#121212, 20%);
|
|
$dark-bg-alpha-4: rgba(#121212, 0.04);
|
|
$dark-bg-alpha-12: rgba(#121212, 0.12);
|
|
|
|
$mat-light-theme-background-palette: (
|
|
background: $light-background,
|
|
status-bar: $light-bg-darker-20,
|
|
app-bar: $light-bg-darker-5,
|
|
hover: $dark-bg-alpha-4,
|
|
card: $light-bg-lighter-5,
|
|
dialog: $light-bg-lighter-5,
|
|
tooltip: $dark-bg-tooltip,
|
|
disabled-button: $dark-bg-alpha-12,
|
|
raised-button: $light-bg-lighter-5,
|
|
focused-button: $dark-focused,
|
|
selected-button: $light-bg-darker-20,
|
|
selected-disabled-button: $light-bg-darker-30,
|
|
disabled-button-toggle: $light-bg-darker-10,
|
|
unselected-chip: $light-bg-darker-10,
|
|
disabled-list-option: $light-bg-darker-10,
|
|
);
|
|
|
|
// Dark bg
|
|
$dark-background: #121212;
|
|
$dark-bg-lighter-5: lighten($dark-background, 5%);
|
|
$dark-bg-lighter-10: lighten($dark-background, 10%);
|
|
$dark-bg-lighter-20: lighten($dark-background, 20%);
|
|
$dark-bg-lighter-30: lighten($dark-background, 30%);
|
|
$light-bg-alpha-4: rgba(#fafafa, 0.04);
|
|
$light-bg-alpha-12: rgba(#fafafa, 0.12);
|
|
|
|
// Background palette for dark themes.
|
|
$mat-dark-theme-background-palette: (
|
|
background: $dark-background,
|
|
status-bar: $dark-bg-lighter-20,
|
|
app-bar: $dark-bg-lighter-10,
|
|
hover: $light-bg-alpha-4,
|
|
card: $dark-bg-lighter-5,
|
|
dialog: $dark-bg-lighter-5,
|
|
tooltip: $dark-bg-lighter-20,
|
|
disabled-button: $light-bg-alpha-12,
|
|
raised-button: $dark-bg-lighter-5,
|
|
focused-button: $light-focused,
|
|
selected-button: $dark-bg-lighter-20,
|
|
selected-disabled-button: $dark-bg-lighter-30,
|
|
disabled-button-toggle: $dark-bg-lighter-10,
|
|
unselected-chip: $dark-bg-lighter-20,
|
|
disabled-list-option: $dark-bg-lighter-10,
|
|
);
|
|
|
|
$mat-theme: (
|
|
color: (
|
|
primary: $picsur-primary,
|
|
accent: $picsur-accent,
|
|
warn: $picsur-warn,
|
|
background: $mat-dark-theme-background-palette,
|
|
foreground: $mat-dark-theme-foreground-palette,
|
|
is-dark: true,
|
|
),
|
|
);
|
|
|
|
$mat-theme-light: (
|
|
(
|
|
color: (
|
|
primary: $picsur-primary,
|
|
accent: $picsur-accent,
|
|
warn: $picsur-warn,
|
|
background: $mat-light-theme-background-palette,
|
|
foreground: $mat-light-theme-foreground-palette,
|
|
),
|
|
)
|
|
);
|
|
|
|
@include mat.all-component-themes($mat-theme);
|
|
@include mat.all-component-typographies($mat-theme);
|
|
@include custom-mat.custom-material($mat-theme);
|
|
|
|
// .theme-alternate {
|
|
// @include mat.all-component-colors($mat-theme-light);
|
|
// @include custom-mat.custom-material($mat-theme-light);
|
|
// }
|
|
|
|
.mat-standard-chip {
|
|
padding: 0.5em 0.85em;
|
|
min-height: 2.5em;
|
|
}
|
|
|
|
.material-icons {
|
|
font-size: 24px;
|
|
font-family: 'Material Icons Round', 'Material Icons';
|
|
.mat-badge-content {
|
|
font-family: 'Roboto';
|
|
}
|
|
}
|