From 832d9c3fc8c2e382df6af1f847070f2dae47c2e4 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Wed, 16 Jan 2019 19:41:44 +0100 Subject: [PATCH] fix(slide-toggle): use default hue for thumb in dark theme (#14230) * 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 #14192 --- src/lib/slide-toggle/_slide-toggle-theme.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/lib/slide-toggle/_slide-toggle-theme.scss b/src/lib/slide-toggle/_slide-toggle-theme.scss index eb16a6c60309..165b98aa2219 100644 --- a/src/lib/slide-toggle/_slide-toggle-theme.scss +++ b/src/lib/slide-toggle/_slide-toggle-theme.scss @@ -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);