@use '~@angular/material' as mat; @include mat.core(); $Website-primary: mat.define-palette(mat.$green-palette); $Website-accent: mat.define-palette(mat.$deep-orange-palette); $Website-warn: mat.define-palette(mat.$red-palette); $Website-theme: mat.define-dark-theme(( color: ( primary: $Website-primary, accent: $Website-accent, warn: $Website-warn, ))); @include mat.all-component-themes($Website-theme); html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } @import '~@angular/material/theming'; $color: mat-get-color-config($Website-theme); $primary: map-get($color, primary); $accent: map-get($color, accent); $error: map-get($color, warn); $background: map_get($mat-grey, 800); a { color: mat-color($primary); text-decoration: none; } footer { background-color: $background; } app-root { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; } .primary { color: mat-color($primary); } .accent { color: mat-color($accent); } .error { color: mat-color($error); } .flex-center { display: flex; justify-content: space-around; }