Skip to content

Commit

Permalink
fix(slide-toggle): use default hue for thumb in dark theme (angular#1…
Browse files Browse the repository at this point in the history
…4230)

* The thumb should use the `default` hue in dark themes to match the MDC behavior and also make it easier for people to create a custom theme without needing to explicitly specify the `200` hue just for the slide-toggle. This also makes the slide-toggle more consistent with the checkbox and radio (which are considered selection controls as well)

Fixes angular#14192
  • Loading branch information
devversion authored and s2-abdo committed Jan 18, 2019
1 parent d16a242 commit 832d9c3
Showing 1 changed file with 5 additions and 3 deletions.
8 changes: 5 additions & 3 deletions src/lib/slide-toggle/_slide-toggle-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,12 @@

// 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 keep the old behavior that is based on the previous
// specifications. See: https://material.io/design/components/selection-controls.html#specs
// 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: if($is-dark, 200, default);
$thumb-checked-hue: default;

$bar-unchecked-color: mat-color($foreground, disabled);
$ripple-unchecked-color: mat-color($foreground, base);
Expand Down

0 comments on commit 832d9c3

Please sign in to comment.