title: ToggleSwitch color/styling
body: <p>I got an issue that my ToggleSwitch is white like this picture below shows:</p>
  
  <p><img src="https://i.stack.imgur.com/3hkgk.png" alt="enter image description here"></p>
  
  <p>I want to style the white part to be black. How do I do that?
  I've changed the default style but no option seems to change it?</p>
  
  <p>Here is my style for it:</p>
  
  <pre><code>&lt;Style x:Key="ToggleSwitchStyle" TargetType="toolkit:ToggleSwitch"&gt;
      &lt;Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/&gt;
      &lt;Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/&gt;
      &lt;Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/&gt;
      &lt;Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/&gt;
      &lt;Setter Property="IsTabStop" Value="False"/&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Left"/&gt;
      &lt;Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Top"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="toolkit:ToggleSwitch"&gt;
                  &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Padding="{TemplateBinding Padding}"&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal"/&gt;
                              &lt;VisualState x:Name="Disabled"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/&gt;
                                      &lt;DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Grid Margin="12,5,12,42"&gt;
                          &lt;Grid.ColumnDefinitions&gt;
                              &lt;ColumnDefinition Width="*"/&gt;
                              &lt;ColumnDefinition Width="Auto"/&gt;
                          &lt;/Grid.ColumnDefinitions&gt;
                          &lt;Grid.RowDefinitions&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                              &lt;RowDefinition Height="Auto"/&gt;
                          &lt;/Grid.RowDefinitions&gt;
                          &lt;ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="#467CCD" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" IsTabStop="False" Margin="-1,0,0,0" Opacity="{TemplateBinding Opacity}" VerticalAlignment="Bottom"/&gt;
                          &lt;ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="-1,1,0,-7" Opacity="{TemplateBinding Opacity}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                          &lt;toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="#467CCD" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="Black" VerticalAlignment="Bottom"/&gt;
                      &lt;/Grid&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>