@import '../core/style/elevation'; @import '../core/theming/palette'; @import '../core/theming/theming'; @import '../core/typography/typography-utils'; @mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) { &.mat-checked { .mat-slide-toggle-thumb { background-color: mat-color($palette, $thumb-checked-hue); } .mat-slide-toggle-bar { // Opacity is determined from the specs for the selection controls. // See: https://material.io/design/components/selection-controls.html#specs background-color: mat-color($palette, $thumb-checked-hue, 0.54); } .mat-ripple-element { // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically // based on the type of interaction with the slide-toggle (e.g. for hover, focus) background-color: mat-color($palette, $thumb-checked-hue); } } } @mixin mat-slide-toggle-theme($theme) { $is-dark: map_get($theme, is-dark); $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $background: map-get($theme, background); $foreground: map-get($theme, foreground); // Color hues are based on the specs which briefly show the hues that are applied to a switch. // The 2018 specs no longer describe how dark switches should look like. Due to the lack of // information for dark themed switches, we partially keep the old behavior that is based on // the previous specifications. For the checked color we always use the `default` hue because // that follows MDC and also makes it easier for people to create a custom theme without needing // to specify each hue individually. $thumb-unchecked-hue: if($is-dark, 400, 50); $thumb-checked-hue: default; $bar-unchecked-color: mat-color($foreground, disabled); $ripple-unchecked-color: mat-color($foreground, base); .mat-slide-toggle { @include _mat-slide-toggle-checked($accent, $thumb-checked-hue); &.mat-primary { @include _mat-slide-toggle-checked($primary, $thumb-checked-hue); } &.mat-warn { @include _mat-slide-toggle-checked($warn, $thumb-checked-hue); } &:not(.mat-checked) .mat-ripple-element { // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically // based on the type of interaction with the slide-toggle (e.g. for hover, focus) background-color: $ripple-unchecked-color; } } .mat-slide-toggle-thumb { @include _mat-theme-elevation(1, $theme); background-color: mat-color($mat-grey, $thumb-unchecked-hue); } .mat-slide-toggle-bar { background-color: $bar-unchecked-color; } } @mixin mat-slide-toggle-typography($config) { .mat-slide-toggle-content { font-family: mat-font-family($config); } }