Piet Ostendorp
8e4a024299
Introduces _theme-colors.scss with generated palettes and integrates them into custom-theme.scss for both light and dark themes. Removes stepper icon styles from performance-info.component.css and moves them to custom-theme.scss for better maintainability and consistency.
85 lines
2.1 KiB
SCSS
85 lines
2.1 KiB
SCSS
|
|
// Include theming for Angular Material with `mat.theme()`.
|
|
// This Sass mixin will define CSS variables that are used for styling Angular Material
|
|
// components according to the Material 3 design spec.
|
|
// Learn more about theming and how to use it for your application's
|
|
// custom components at https://material.angular.dev/guide/theming
|
|
@use '@angular/material' as mat;
|
|
@use './_theme-colors' as theme-colors;
|
|
|
|
// Light Theme
|
|
html {
|
|
color-scheme: light;
|
|
@include mat.theme((
|
|
color: (
|
|
theme-type: light,
|
|
primary: theme-colors.$primary-palette,
|
|
tertiary: theme-colors.$tertiary-palette,
|
|
),
|
|
));
|
|
}
|
|
|
|
// Dark Theme
|
|
html.dark {
|
|
color-scheme: dark;
|
|
@include mat.theme((
|
|
color: (
|
|
theme-type: dark,
|
|
primary: theme-colors.$primary-palette,
|
|
tertiary: theme-colors.$tertiary-palette,
|
|
),
|
|
));
|
|
}
|
|
|
|
|
|
|
|
@include mat.progress-bar-overrides((
|
|
active-indicator-color: white,
|
|
track-color: transparent,
|
|
));
|
|
|
|
.mdc-linear-progress__buffer-bar {
|
|
background: linear-gradient(to right, #6366f1, #db2777) !important;
|
|
}
|
|
|
|
@include mat.snack-bar-overrides((
|
|
container-color: red,
|
|
));
|
|
|
|
|
|
|
|
.error-snackbar .mat-mdc-snack-bar-label {
|
|
color: white !important;
|
|
}
|
|
|
|
.error-snackbar .mat-mdc-button {
|
|
color: white !important;
|
|
}
|
|
|
|
.backdropBackground {
|
|
background-color: rgba(0, 0, 0, 0.75) !important;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.mat-step-header .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed) {
|
|
background-color: #ccc;
|
|
color: white;
|
|
}
|
|
|
|
body {
|
|
// Default the application to a light color theme. This can be changed to
|
|
// `dark` to enable the dark color theme, or to `light dark` to defer to the
|
|
// user's system settings.
|
|
color-scheme: light;
|
|
|
|
// Set a default background, font and text colors for the application using
|
|
// Angular Material's system-level CSS variables. Learn more about these
|
|
// variables at https://material.angular.dev/guide/system-variables
|
|
background-color: var(--mat-sys-surface);
|
|
color: var(--mat-sys-on-surface);
|
|
font: var(--mat-sys-body-medium);
|
|
|
|
// Reset the user agent margin.
|
|
margin: 0;
|
|
}
|