$theme-light-primary:mat-palette($mat-indigo); $theme-light-accent:mat-palette($mat-pink, A200, A100, A400); $theme-light-warn:mat-palette($mat-red); $theme-light:mat-light-theme($theme-light-primary, $theme-light-accent, $theme-light-warn); .theme-light { @include angular-material-theme($theme-light); ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background-color: map-get($mat-grey, 200); } ::-webkit-scrollbar-thumb { background-color: map-get($mat-grey, 400); &:hover { background-color: map-get($mat-grey, 500); } } .app-background { background-color: mat-color(map-get($theme-light, background), background) !important; } .app-background-card { background-color: mat-color(map-get($theme-light, background), card) !important; } .app-background-focus { background-color: mat-color(map-get($theme-light, background), hover) !important; } .app-background-primary { background-color: mat-color($theme-light-primary) !important; } .app-background-primary-lighter { background-color: mix(mat-color($theme-light-primary), mat-color(map-get($theme-light, background), card), 12%); } .app-background-accent { background-color: mat-color($theme-light-accent) !important; } .app-background-accent-lighter { background-color: mix(mat-color($theme-light-accent), mat-color(map-get($theme-light, background), card), 12%); } .app-background-warn { background-color: mat-color($theme-light-warn) !important; } .app-background-warn-lighter { background-color: mix(mat-color($theme-light-warn), mat-color(map-get($theme-light, background), card), 12%); } .app-foreground { color: mat-color(map-get($theme-light, foreground), text) !important; } .app-foreground-primary { color: mat-color($theme-light-primary) !important; } .app-foreground-secondary { color: mat-color(map-get($theme-light, foreground), secondary-text) !important; } .app-foreground-accent { color: mat-color($theme-light-accent) !important; } .app-foreground-warn { color: mat-color($theme-light-warn) !important; } .app-foreground-disabled { color: mat-color(map-get($theme-light, foreground), disabled-text) !important; } .app-layout { @extend .mat-app-background; .app-sidenav-container { .app-sidenav:not(.mat-drawer-end) { .app-header { background-color: mat-color($mat-gray, A100); border-bottom-color: mat-color($mat-gray, 300); } .app-body { background-color: mat-color($mat-gray, A100); .app-menu { .app-menu-item { &:hover, &.focus { background-color: mat-color($mat-gray, 100); } &>a { color: mat-color($mat-gray, 900); } &.active>a { color: mat-color($mat-indigo, 500); } } } } } .app-sidenav-content { .app-header { background-color: mat-color($mat-gray, A100); border-bottom-color: mat-color($mat-gray, 300); } .app-body { .ng-bar { background-color: mat-color($theme-light-primary); } } } } } }