From 97bbb3ba92bf35ea80aaa0bf0868117147070466 Mon Sep 17 00:00:00 2001
From: JamRemco <58340108+JamRemco@users.noreply.github.com>
Date: Wed, 3 Jun 2020 14:10:54 +0200
Subject: [PATCH] added light fluent resources

---
 src/Avalonia.Themes.Default/ToggleSwitch.xaml | 335 +++++++++---------
 .../Accents/FluentControlResourcesDark.xaml   |  62 ++++
 src/Avalonia.Themes.Fluent/ToggleSwitch.xaml  |  39 +-
 3 files changed, 254 insertions(+), 182 deletions(-)

diff --git a/src/Avalonia.Themes.Default/ToggleSwitch.xaml b/src/Avalonia.Themes.Default/ToggleSwitch.xaml
index e929810376..3cdcb3f6c5 100644
--- a/src/Avalonia.Themes.Default/ToggleSwitch.xaml
+++ b/src/Avalonia.Themes.Default/ToggleSwitch.xaml
@@ -1,170 +1,177 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-       
+
   <Design.PreviewWith>
-    <StackPanel Margin="20" Width="200" Spacing="8"> 
-      <TextBlock 
-        Text="Automatic updates" 
-        Classes="h1"/>
-      <TextBlock 
-        Text="Updates will be automaticly Foenloaded and installed when shutdown down" 
-        TextWrapping="Wrap"/> 
-      <ToggleSwitch Content="Updates" 
-        FontWeight="Medium" 
-        VerticalAlignment="Bottom"/>
-      <TextBlock 
-        Text="Previewer"  
-        Classes="h1"/>
-      <TextBlock  
-        Text="The previewer Shows a representation off your code, this could slow down your system"
-        TextWrapping="Wrap"/> 
-      <ToggleSwitch 
-        Content="Previewer" 
-        IsChecked="True"
-         FontWeight="Medium"/>
+    <StackPanel Margin="20" Width="250" Spacing="24">
+
+      <StackPanel Spacing="12">
+        <TextBlock
+          Text="Automatic updates"
+          Classes="h1"/>
+        <TextBlock
+          Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
+          TextWrapping="Wrap"/>
+        <ToggleSwitch Content="Updates"
+          FontWeight="Medium"
+          VerticalAlignment="Bottom"/>
+      </StackPanel>
+
+      <StackPanel Spacing="12">
+        <TextBlock
+          Text="Previewer"
+          Classes="h1"/>
+        <TextBlock
+          Text="The previewer Shows a preview off your code, this could slow down your system"
+          TextWrapping="Wrap"/>
+        <ToggleSwitch
+          Content="Previewer"
+          IsChecked="True"
+          FontWeight="Medium"/>
+      </StackPanel>
+
     </StackPanel>
   </Design.PreviewWith>
-    
-      <Style Selector="ToggleSwitch" >
-        
-        <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-        <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
-        <Setter Property="MinWidth" Value="72"/>
-        <Setter Property="MinHeight" Value="32"/>
-        <Setter Property="Template">
-          <ControlTemplate>
-            <Grid ColumnDefinitions="Auto,*"
-                  RowDefinitions="18,auto"
+
+  <Style Selector="ToggleSwitch">
+
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="MinWidth" Value="72"/>
+    <Setter Property="MinHeight" Value="32"/>
+
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="Auto,*"
+              RowDefinitions="22,auto"
                  >
-              <Canvas 
-                  Height="24"  
-                  Grid.Row="1" 
-                  Grid.Column="0">
-
-                <Border 
-                    Name="PART_BorderBackground"
-                    Height="20" Width="44"
-                    Canvas.Top="2"
-                    Canvas.Left="0"
-                    BorderThickness="2"
-                    CornerRadius="100"/>
-
-                <Ellipse 
-                    Name="PART_CircleThumb"
-                    Height="10" Width="10"
-                    Canvas.Top="7"
-                    Canvas.Left="5"/>
-
-                <ContentControl Name="PART_TextBooleanValue"
-                     Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
-
-              </Canvas>
-
-              <ContentPresenter 
-                  Name="PART_ContentPresenter"
-                  ContentTemplate="{TemplateBinding ContentTemplate}"
-                  Content="{TemplateBinding Content}"
-                  Margin="{TemplateBinding Padding}"
-                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                  Background="Transparent"
-                  IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
-                  Grid.Row="0" Grid.Column="0"/>
-            </Grid>
-          </ControlTemplate>
-        </Setter>
-
-      </Style>
-       
-        
-      <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
-        <Style.Animations>
-          <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
-            <KeyFrame Cue="0%">
-              <Setter Property="Fill" Value="White"/>
-              <Setter Property="Canvas.Left" Value="28"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Fill" Value="RoyalBlue"/>
-              <Setter Property="Canvas.Left" Value="5"/>
-            </KeyFrame>
-          </Animation>
-        </Style.Animations>
-      </Style>
-      
-    <Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
-        <Style.Animations>
-          <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
-            <KeyFrame Cue="0%">
-              <Setter Property="Fill" Value="RoyalBlue"/>
-              <Setter Property="Canvas.Left" Value="5"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Fill" Value="White"/>
-              <Setter Property="Canvas.Left" Value="28"/>
-            </KeyFrame>
-          </Animation>
-        </Style.Animations>
-      </Style>
-  
-      <Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
-        <Style.Animations>
-          <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
-            <KeyFrame Cue="0%">
-              <Setter Property="Background" Value="Royalblue"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Background" Value="White"/>
-            </KeyFrame>
-          </Animation>
-        </Style.Animations>
-        <Setter Property="BorderBrush" Value="Silver"/>
-      </Style>
+          <Canvas
+              Height="24"
+              Grid.Row="1"
+              Grid.Column="0">
 
-      <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
-        <Style.Animations>
-          <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
-             <KeyFrame Cue="0%">
-              <Setter Property="Background" Value="White"/>
-            </KeyFrame>
-            <KeyFrame Cue="100%">
-              <Setter Property="Background" Value="RoyalBlue"/>
-            </KeyFrame>
-          </Animation>
-        </Style.Animations>
-        <Setter Property="BorderBrush" Value="Royalblue"/>
-      </Style>
+            <Border
+                Name="PART_BorderBackground"
+                Height="20" Width="44"
+                Canvas.Top="2"
+                Canvas.Left="0"
+                BorderThickness="2"
+                CornerRadius="100"/>
+
+            <Ellipse
+                Name="PART_CircleThumb"
+                Height="10" Width="10"
+                Canvas.Top="7"
+                Canvas.Left="5"/>
+
+            <ContentControl Name="PART_TextBooleanValue"
+                 Canvas.Left="51" VerticalContentAlignment="Bottom" Height="20"/>
+
+          </Canvas>
 
-   <Style Selector="ToggleSwitch:pressed  /template/ Border#PART_BorderBackground">
+          <ContentPresenter
+              Name="PART_ContentPresenter"
+              ContentTemplate="{TemplateBinding ContentTemplate}"
+              Content="{TemplateBinding Content}"
+              Margin="{TemplateBinding Padding}"
+              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+              Background="Transparent"
+              IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
+              Grid.Row="0" Grid.Column="0"/>
+        </Grid>
+      </ControlTemplate>
+    </Setter>
+
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
+    <Style.Animations>
+      <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
+        <KeyFrame Cue="0%">
+          <Setter Property="Fill" Value="White"/>
+          <Setter Property="Canvas.Left" Value="28"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="Fill" Value="RoyalBlue"/>
+          <Setter Property="Canvas.Left" Value="5"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
+    <Style.Animations>
+      <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
+        <KeyFrame Cue="0%">
+          <Setter Property="Fill" Value="RoyalBlue"/>
+          <Setter Property="Canvas.Left" Value="5"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="Fill" Value="White"/>
+          <Setter Property="Canvas.Left" Value="28"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
+    <Style.Animations>
+      <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
+        <KeyFrame Cue="0%">
+          <Setter Property="Background" Value="Royalblue"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="Background" Value="White"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+    <Setter Property="BorderBrush" Value="Silver"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
+    <Style.Animations>
+      <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
+        <KeyFrame Cue="0%">
+          <Setter Property="Background" Value="White"/>
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="Background" Value="RoyalBlue"/>
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+    <Setter Property="BorderBrush" Value="Royalblue"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:pressed  /template/ Border#PART_BorderBackground">
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
   </Style>
- 
-      <Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
-        <Setter Property="Content" Value="On"/>
-      </Style>
-
-      <Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
-        <Setter Property="Content" Value="Off"/>
-      </Style>
-
-      <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
-        <Setter Property="BorderBrush" Value="cornflowerblue"/>
-      </Style>
-
-      <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
-        <Setter Property="BorderBrush" Value="Mediumblue"/>
-      </Style>
-      
-      <Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
-        <Setter Property="Background" Value="RoyalBlue"/>
-      </Style>
-       
-      <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
-         <Setter Property="BorderBrush" Value="cornflowerblue"/>
-      </Style>
-  
-     <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
+    <Setter Property="Content" Value="On"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
+    <Setter Property="Content" Value="Off"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
+    <Setter Property="BorderBrush" Value="cornflowerblue"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground">
+    <Setter Property="BorderBrush" Value="Mediumblue"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
+    <Setter Property="Background" Value="RoyalBlue"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
+    <Setter Property="BorderBrush" Value="cornflowerblue"/>
+  </Style>
+
+  <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
          <Style.Animations>
           <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
              <KeyFrame Cue="0%">
@@ -176,13 +183,13 @@
           </Animation>
           </Style.Animations>
       </Style>-->
-        
-      <Style Selector="ToggleSwitch:disabled">
-        <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
-      </Style>
-      
-  
-      <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
+
+  <Style Selector="ToggleSwitch:disabled">
+    <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
+  </Style>
+
+
+  <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
         <Setter Property="Content" Value="Not set"/>
       </Style>-->
 </Styles>
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index 7364c339f1..8265c22a88 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -343,5 +343,67 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
+  
+  <!--ToggleSwitch-->
+    
+    <x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>
+            <x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>
+            <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOff" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOffPointerOver" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOffPressed" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOffDisabled" ResourceKey="SystemControlTransparentBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOff" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOffPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOffPressed" ResourceKey="SystemControlForegroundBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOn" ResourceKey="SystemControlHighlightAccentBrush" />
+            <StaticResource x:Key="ToggleSwitchFillOnPointerOver" ResourceKey="SystemAccentColorLight1" />
+            <StaticResource x:Key="ToggleSwitchFillOnPressed" ResourceKey="SystemAccentColorDark1" />
+            <StaticResource x:Key="ToggleSwitchFillOnDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOn" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchStrokeOnPointerOver" ResourceKey="SystemAccentColorLight1" />
+            <StaticResource x:Key="ToggleSwitchStrokeOnPressed" ResourceKey="SystemAccentColorDark1" />
+            <StaticResource x:Key="ToggleSwitchStrokeOnDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOff" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOffPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOffPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOn" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOnPointerOver" ResourceKey="SystemControlHighlightChromeWhiteBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOnPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+            <StaticResource x:Key="ToggleSwitchKnobFillOnDisabled" ResourceKey="SystemControlPageBackgroundBaseLowBrush" />
+
+            <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
+            <SolidColorBrush x:Key="ToggleSwitchCurtainDisabledBackgroundThemeBrush" Color="Transparent" />
+            <SolidColorBrush x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush" Color="#FF6E46CA" />
+            <SolidColorBrush x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush" Color="#FF7E4FEC" />
+            <SolidColorBrush x:Key="ToggleSwitchDisabledForegroundThemeBrush" Color="#66FFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchForegroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchHeaderDisabledForegroundThemeBrush" Color="#66FFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchOuterBorderBorderThemeBrush" Color="#59FFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchOuterBorderDisabledBorderThemeBrush" Color="#33FFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbBackgroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbBorderThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBackgroundThemeBrush" Color="#FF7E7E7E" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBorderThemeBrush" Color="#FF7E7E7E" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBackgroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBorderThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchThumbPressedForegroundThemeBrush" Color="#FFFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchTrackBackgroundThemeBrush" Color="#42FFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchTrackBorderThemeBrush" Color="Transparent" />
+            <SolidColorBrush x:Key="ToggleSwitchTrackDisabledBackgroundThemeBrush" Color="#1FFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush" Color="#4AFFFFFF" />
+            <SolidColorBrush x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush" Color="#59FFFFFF" />
+
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
index 1fe9788839..2b665753b1 100644
--- a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
+++ b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
@@ -2,20 +2,21 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
        
   <Design.PreviewWith>
-    <StackPanel Margin="20" Width="200" Spacing="24">
-      <StackPanel Spacing="8">
+    <StackPanel Margin="20" Width="250" Spacing="24">
+ 
+      <StackPanel Spacing="12">
         <TextBlock 
           Text="Automatic updates" 
           Classes="h1"/>
         <TextBlock 
-          Text="Updates will be automaticly Downloaded and installed when shutdown down" 
+          Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting" 
           TextWrapping="Wrap"/> 
         <ToggleSwitch Content="Updates" 
           FontWeight="Medium" 
           VerticalAlignment="Bottom"/>
       </StackPanel>
       
-      <StackPanel Spacing="8">
+      <StackPanel Spacing="12">
         <TextBlock 
           Text="Previewer"  
           Classes="h1"/>
@@ -31,17 +32,18 @@
     </StackPanel>
   </Design.PreviewWith>
     
-      <Style Selector="ToggleSwitch" >
+      <Style Selector="ToggleSwitch">
         
         <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
         <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
         <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
         <Setter Property="MinWidth" Value="72"/>
         <Setter Property="MinHeight" Value="32"/>
+        
         <Setter Property="Template">
           <ControlTemplate>
             <Grid ColumnDefinitions="Auto,*"
-                  RowDefinitions="18,auto"
+                  RowDefinitions="22,auto"
                  >
               <Canvas 
                   Height="24"  
@@ -83,8 +85,7 @@
 
       </Style>
        
-        
-      <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
+       <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
         <Style.Animations>
           <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
             <KeyFrame Cue="0%">
@@ -103,7 +104,7 @@
         <Style.Animations>
           <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
             <KeyFrame Cue="0%">
-              <Setter Property="Fill" Value="RoyalBlue"/>
+              <Setter Property="Fill" Value="{DynamicResource ToggleSwitchFillOn}"/>
               <Setter Property="Canvas.Left" Value="5"/>
             </KeyFrame>
             <KeyFrame Cue="100%">
@@ -118,14 +119,14 @@
         <Style.Animations>
           <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
             <KeyFrame Cue="0%">
-              <Setter Property="Background" Value="Royalblue"/>
+              <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
             </KeyFrame>
             <KeyFrame Cue="100%">
               <Setter Property="Background" Value="White"/>
             </KeyFrame>
           </Animation>
         </Style.Animations>
-        <Setter Property="BorderBrush" Value="Silver"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
       </Style>
 
       <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
@@ -135,16 +136,16 @@
               <Setter Property="Background" Value="White"/>
             </KeyFrame>
             <KeyFrame Cue="100%">
-              <Setter Property="Background" Value="RoyalBlue"/>
+              <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
             </KeyFrame>
           </Animation>
         </Style.Animations>
-        <Setter Property="BorderBrush" Value="Royalblue"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchFillOn}"/>
       </Style>
-
-   <Style Selector="ToggleSwitch:pressed  /template/ Border#PART_BorderBackground">
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
-  </Style>
+  
+      <Style Selector="ToggleSwitch:pressed  /template/ Border#PART_BorderBackground">
+         <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighBrush}"/>
+       </Style>
  
       <Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
         <Setter Property="Content" Value="On"/>
@@ -163,7 +164,7 @@
       </Style>
       
       <Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
-        <Setter Property="Background" Value="RoyalBlue"/>
+        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
       </Style>
        
       <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
@@ -191,4 +192,6 @@
       <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
         <Setter Property="Content" Value="Not set"/>
       </Style>-->
+
+  
 </Styles>