Change Color of ToggleSwitch

Given you implement an app using the dark theme. This app contains some configuration values, which can be changed using a settings flyout. According to the design guidelines, the background of the settings flyout should be white.

Unfortunately, the default color theme for all controls is dark. So they are optimized for a dark background, but almost invisible on a white. To make a ToggleSwitch visible on the white background of the settings page while leaving the app’s theme dark, some theme resources needs to be overridden. This can be done inside the App.xaml, the StandardsStyles.xaml, or any other ResourceDictionary that is used by the app.

To make the ToggleSwitch visible on a white background while the app uses a dark theme, set these values:

<SolidColorBrush
 x:Key="ToggleSwitchCurtainBackgroundThemeBrush"
 Color="#FF4617B4" />
<SolidColorBrush
 x:Key="ToggleSwitchCurtainDisabledBackgroundThemeBrush"
 Color="Transparent" />
<SolidColorBrush
 x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush"
 Color="#FF5F37BE" />
<SolidColorBrush
  x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush"
  Color="#FF7241E4" />

<SolidColorBrush
  x:Key="ToggleSwitchDisabledForegroundThemeBrush"
  Color="#66000000" />
<SolidColorBrush
  x:Key="ToggleSwitchForegroundThemeBrush"
  Color="#FF000000" />

<SolidColorBrush
  x:Key="ToggleSwitchHeaderDisabledForegroundThemeBrush"
  Color="#66000000" />
<SolidColorBrush
  x:Key="ToggleSwitchHeaderForegroundThemeBrush"
  Color="#FF000000" />

<SolidColorBrush
  x:Key="ToggleSwitchOuterBorderBorderThemeBrush"
  Color="#59000000" />
<SolidColorBrush
  x:Key="ToggleSwitchOuterBorderDisabledBorderThemeBrush"
  Color="#33000000" />

<SolidColorBrush
  x:Key="ToggleSwitchThumbBackgroundThemeBrush"
  Color="#FF000000" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbBorderThemeBrush"
  Color="#FF000000" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbDisabledBackgroundThemeBrush"
  Color="#FF929292" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbDisabledBorderThemeBrush"
  Color="#FF929292" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbPointerOverBackgroundThemeBrush"
  Color="#FF000000" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbPointerOverBorderThemeBrush"
  Color="#FF000000" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbPressedBackgroundThemeBrush"
  Color="#FF000000" />
<SolidColorBrush
  x:Key="ToggleSwitchThumbPressedForegroundThemeBrush"
  Color="#FF000000" />

<SolidColorBrush
  x:Key="ToggleSwitchTrackBackgroundThemeBrush"
  Color="#59000000" />
<SolidColorBrush
  x:Key="ToggleSwitchTrackBorderThemeBrush"
  Color="Transparent" />
<SolidColorBrush
  x:Key="ToggleSwitchTrackDisabledBackgroundThemeBrush"
  Color="#1F000000" />
<SolidColorBrush
  x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush"
  Color="#4A000000" />
<SolidColorBrush
  x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush"
  Color="#42000000" />

For more options to change ToggleSwitch styles and templates, please have a look at ToggleSwitch styles and templates.