fix(toggle): use correct handle color for dark themes

references #18713

Author: brandyscarney

core/src/components/toggle/toggle.ios.vars.scss

@@ -17,7 +17,7 @@ $toggle-ios-border-width:              2px !default;
 $toggle-ios-border-radius:             $toggle-ios-height / 2 !default;
 
 /// @prop - Background color of the unchecked toggle
-$toggle-ios-background-color-off:      $item-ios-background !default;
+$toggle-ios-background-color-off:      rgba(255, 255, 255, .19) !default;
 
 /// @prop - Border color of the unchecked toggle
 $toggle-ios-border-color-off:          $background-color-step-50 !default;
@@ -38,7 +38,7 @@ $toggle-ios-handle-border-radius:      $toggle-ios-handle-height / 2 !default;
 $toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
 
 /// @prop - Background color of the toggle handle
-$toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
+$toggle-ios-handle-background-color:   #ffffff !default;
 
 /// @prop - Margin of the toggle handle
 $toggle-ios-media-margin:              0 !default;

core/src/components/toggle/toggle.md.vars.scss

@@ -14,7 +14,7 @@ $toggle-md-track-width:                           36px !default;
 $toggle-md-track-height:                          14px !default;
 
 /// @prop - Background color of the toggle track
-$toggle-md-track-background-color-off:            ion-color(medium, tint) !default;
+$toggle-md-track-background-color-off:            rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.3) !default;
 
 /// @prop - Background color alpha of the checked toggle track
 $toggle-md-track-background-color-alpha-on:       .5 !default;
@@ -35,7 +35,7 @@ $toggle-md-handle-border-radius:                  50% !default;
 $toggle-md-handle-box-shadow:                     0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
 /// @prop - Background color of the toggle handle
-$toggle-md-handle-background-color-off:           $background-color !default;
+$toggle-md-handle-background-color-off:           #ffffff !default;
 
 /// @prop - Background color of the checked toggle handle
 $toggle-md-handle-background-color-on:            $toggle-md-active-color !default;