Default theme now uses style resources.

src/Perspex.Controls/Presenters/TextPresenter.cs

@@ -5,6 +5,7 @@ using System;
 using System.Linq;
 using System.Reactive.Linq;
 using Perspex.Media;
+using Perspex.Styling;
 using Perspex.Threading;
 using Perspex.VisualTree;
 
@@ -22,10 +23,9 @@ namespace Perspex.Controls.Presenters
             TextBox.SelectionEndProperty.AddOwner<TextPresenter>();
 
         private readonly DispatcherTimer _caretTimer;
-
         private bool _caretBlink;
-
         private IObservable<bool> _canScrollHorizontally;
+        private Brush _highlightBrush;
 
         static TextPresenter()
         {
@@ -85,11 +85,14 @@ namespace Perspex.Controls.Presenters
                 var length = Math.Max(selectionStart, selectionEnd) - start;
                 var rects = FormattedText.HitTestTextRange(start, length);
 
-                var brush = new SolidColorBrush(0xff086f9e);
+                if (_highlightBrush == null)
+                {
+                    _highlightBrush = (Brush)this.FindStyleResource("HighlightBrush");
+                }
 
                 foreach (var rect in rects)
                 {
-                    context.FillRectangle(brush, rect);
+                    context.FillRectangle(_highlightBrush, rect);
                 }
             }
 

src/Perspex.Styling/Styling/Setter.cs

@@ -101,25 +101,29 @@ namespace Perspex.Styling
                 else
                 {
                     var sourceInstance = binding.Initiate(control, Property);
-                    InstancedBinding activatedInstance;
 
-                    if (sourceInstance.Subject != null)
+                    if (sourceInstance != null)
                     {
-                        var activated = new ActivatedSubject(activator, sourceInstance.Subject, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
-                    else if (sourceInstance.Observable != null)
-                    {
-                        var activated = new ActivatedObservable(activator, sourceInstance.Observable, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
-                    else
-                    {
-                        var activated = new ActivatedValue(activator, sourceInstance.Value, description);
-                        activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
-                    }
+                        InstancedBinding activatedInstance;
+
+                        if (sourceInstance.Subject != null)
+                        {
+                            var activated = new ActivatedSubject(activator, sourceInstance.Subject, description);
+                            activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
+                        }
+                        else if (sourceInstance.Observable != null)
+                        {
+                            var activated = new ActivatedObservable(activator, sourceInstance.Observable, description);
+                            activatedInstance = new InstancedBinding(activated, sourceInstance.Mode, sourceInstance.Priority);
+                        }
+                        else
+                        {
+                            var activated = new ActivatedValue(activator, sourceInstance.Value, description);
+                            activatedInstance = new InstancedBinding(activated, BindingMode.OneWay, sourceInstance.Priority);
+                        }
 
-                    BindingOperations.Apply(control, Property, activatedInstance, null);
+                        BindingOperations.Apply(control, Property, activatedInstance, null);
+                    }
                 }
             }
         }

src/Perspex.Themes.Default/Accents/BaseLight.paml

@@ -1,36 +1,29 @@
 <Style xmlns="https://github.com/perspex"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-       xmlns:mut="https://github.com/perspex/mutable">
+       xmlns:mut="https://github.com/perspex/mutable"
+       xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <Style.Resources>
-    <Color x:Key="SystemAltHighColor">#FF000000</Color>
-    <Color x:Key="SystemAltLowColor">#33000000</Color>
-    <Color x:Key="SystemAltMediumColor">#99000000</Color>
-    <Color x:Key="SystemAltMediumHighColor">#CC000000</Color>
-    <Color x:Key="SystemAltMediumLowColor">#66000000</Color>
-    <Color x:Key="SystemBaseHighColor">#FFFFFFFF</Color>
-    <Color x:Key="SystemBaseLowColor">#33FFFFFF</Color>
-    <Color x:Key="SystemBaseMediumColor">#99FFFFFF</Color>
-    <Color x:Key="SystemBaseMediumHighColor">#CCFFFFFF</Color>
-    <Color x:Key="SystemBaseMediumLowColor">#66FFFFFF</Color>
-    <Color x:Key="SystemChromeAltLowColor">#FFF2F2F2</Color>
-    <Color x:Key="SystemChromeBlackHighColor">#FF000000</Color>
-    <Color x:Key="SystemChromeBlackLowColor">#33000000</Color>
-    <Color x:Key="SystemChromeBlackMediumLowColor">#66000000</Color>
-    <Color x:Key="SystemChromeBlackMediumColor">#CC000000</Color>
-    <Color x:Key="SystemChromeDisabledHighColor">#FF333333</Color>
-    <Color x:Key="SystemChromeDisabledLowColor">#FF858585</Color>
-    <Color x:Key="SystemChromeHighColor">#FF767676</Color>
-    <Color x:Key="SystemChromeLowColor">#FF171717</Color>
-    <Color x:Key="SystemChromeMediumColor">#FF1F1F1F</Color>
-    <Color x:Key="SystemChromeMediumLowColor">#FF2B2B2B</Color>
-    <Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
-    <Color x:Key="SystemListLowColor">#19FFFFFF</Color>
-    <Color x:Key="SystemListMediumColor">#33FFFFFF</Color>
+    <SolidColorBrush x:Key="ThemeBackgroundBrush">#FFFFFFFF</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderLightBrush">#FFAAAAAA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderMidBrush">#FF888888</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeBorderDarkBrush">#FF333333</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlLightBrush">#FFFFFFFF</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlMidBrush">#FFAAAAAA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeControlDarkBrush">#FF888888</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundBrush">#FF000000</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeForegroundLightBrush">#FF808080</SolidColorBrush>
 
-    <Color x:Key="FooColor">Red</Color>
+    <SolidColorBrush x:Key="HighlightBrush">#FF086F9E</SolidColorBrush>    
+    <SolidColorBrush x:Key="ThemeAccentBrush">#CC119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush2">#99119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush3">#66119EDA</SolidColorBrush>
+    <SolidColorBrush x:Key="ThemeAccentBrush4">#33119EDA</SolidColorBrush>
 
-    <!--<mut:SolidColorBrush x:Key="SystemControlBackgroundBaseHighBrush" Color="{StyleResource SystemBaseHighColor}"/>
-    <mut:SolidColorBrush x:Key="SystemControlBackgroundBaseLowBrush" Color="{StyleResource SystemBaseLowColor}"/>
-    <mut:SolidColorBrush x:Key="FooBrush" Color="{StyleResource FooColor}"/>-->
+    <sys:Double x:Key="ThemeBorderThickness">2</sys:Double>
+    <sys:Double x:Key="ThemeDisabledOpacity">0.5</sys:Double>
+
+    <sys:Double x:Key="FontSizeSmall">10</sys:Double>
+    <sys:Double x:Key="FontSizeNormal">12</sys:Double>
+    <sys:Double x:Key="FontSizeLarge">16</sys:Double>
   </Style.Resources>
 </Style>

src/Perspex.Themes.Default/Button.paml

@@ -1,15 +1,15 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="Button">
-    <Setter Property="Background" Value="#ffaaaaaa"/>
-    <Setter Property="BorderBrush" Value="#ffaaaaaa"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderLightBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
+    <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
-                Padding="3"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
@@ -24,12 +24,12 @@
     </Setter>
   </Style>
   <Style Selector="Button:pointerover /template/ Border#border">
-    <Setter Property="BorderBrush" Value="#ff888888"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="Button:pressed  /template/ Border#border">
-    <Setter Property="Background" Value="#ff888888"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
   </Style>
   <Style Selector="Button:disabled">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/CheckBox.paml

@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="CheckBox">
-    <Setter Property="BorderBrush" Value="#ff333333"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="Auto,*">
@@ -12,7 +12,7 @@
                   Height="18"
                   VerticalAlignment="Center">
             <Path Name="checkMark"
-                  Fill="#ff333333"
+                  Fill="{StyleResource HighlightBrush}"
                   Width="11"
                   Height="10"
                   Stretch="Uniform"
@@ -29,6 +29,9 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="CheckBox:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="CheckBox /template/ Path#checkMark">
     <Setter Property="IsVisible" Value="False"/>
   </Style>
@@ -36,6 +39,6 @@
     <Setter Property="IsVisible" Value="True"/>
   </Style>
   <Style Selector="CheckBox:disabled /template/ Border#border">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/DropDown.paml

@@ -1,11 +1,12 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="DropDown">
-    <Setter Property="BorderBrush" Value="#ff707070"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}"
+        <Border Name="border"
+                Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}">
           <Grid ColumnDefinitions="*,Auto">
@@ -20,7 +21,7 @@
                           Focusable="False"
                           IsChecked="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
                           Grid.Column="1">
-              <Path Fill="Black"
+              <Path Fill="{StyleResource ThemeForegroundBrush}"
                     Width="8"
                     Height="4"
                     Stretch="Uniform"
@@ -33,7 +34,7 @@
                    MinWidth="{TemplateBinding Path=Bounds.Width}"
                    PlacementTarget="{TemplateBinding}"
                    StaysOpen="False">
-              <Border BorderBrush="Black"
+              <Border BorderBrush="{StyleResource ThemeBorderMidBrush}"
                       BorderThickness="1">
                 <ItemsPresenter Name="PART_ItemsPresenter"
                                 Items="{TemplateBinding Items}" 
@@ -45,10 +46,7 @@
       </ControlTemplate>
     </Setter>
   </Style>
-  <Style Selector="CheckBox /template/ Path#checkMark">
-    <Setter Property="IsVisible" Value="False"/>
-  </Style>
-  <Style Selector="CheckBox:checked /template/ Path#checkMark">
-    <Setter Property="IsVisible" Value="True"/>
+  <Style Selector="DropDown:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/GridSplitter.paml

@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="GridSplitter:vertical">
     <Setter Property="Width" Value="6"/>
-    <Setter Property="Background" Value="LightGray"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}">
@@ -11,7 +11,7 @@
                 <Setter Property="HorizontalAlignment" Value="Center"/>
                 <Setter Property="Width" Value="4"/>
                 <Setter Property="Height" Value="4"/>
-                <Setter Property="Fill" Value="#404040"/>
+                <Setter Property="Fill" Value="{StyleResource ThemeControlMidBrush}"/>
                 <Setter Property="Margin" Value="1"/>
               </Style>
             </StackPanel.Styles>
@@ -25,7 +25,7 @@
   </Style>
   <Style Selector="GridSplitter:horizontal">
     <Setter Property="Height" Value="6"/>
-    <Setter Property="Background" Value="LightGray"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}">
@@ -35,7 +35,7 @@
                 <Setter Property="VerticalAlignment" Value="Center"/>
                 <Setter Property="Width" Value="4"/>
                 <Setter Property="Height" Value="4"/>
-                <Setter Property="Fill" Value="#404040"/>
+                <Setter Property="Fill" Value="{StyleResource ThemeControlMidBrush}"/>
                 <Setter Property="Margin" Value="1"/>
               </Style>
             </StackPanel.Styles>

src/Perspex.Themes.Default/ListBox.paml

@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="ListBox">
-  <Setter Property="BorderBrush" Value="Black"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+  <Setter Property="Padding" Value="4"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}"
@@ -10,6 +11,7 @@
           <ItemsPresenter Name="PART_ItemsPresenter"
                           Items="{TemplateBinding Items}"
                           ItemsPanel="{TemplateBinding ItemsPanel}"
+                          Margin="{TemplateBinding Padding}"
                           MemberSelector="{TemplateBinding MemberSelector}"/>
         </ScrollViewer>
       </Border>

src/Perspex.Themes.Default/MenuItem.paml

@@ -37,7 +37,7 @@
             </ContentPresenter>
             <Path Name="rightArrow"
                   Data="M0,0L4,3.5 0,7z"
-                  Fill="#ff212121"
+                  Fill="{StyleResource ThemeForegroundBrush}"
                   Margin="10,0,0,0"
                   VerticalAlignment="Center"
                   Grid.Column="3"/>
@@ -46,17 +46,17 @@
                    StaysOpen="True"
                    IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}">
               <Border Background="{TemplateBinding Background}"
-                      BorderBrush="#ff999999"
-                      BorderThickness="1"
-                      Padding="2">
+                      BorderBrush="{StyleResource ThemeBorderMidBrush}"
+                      BorderThickness="1">
                 <ScrollViewer>
                   <Panel>
                     <ItemsPresenter Name="PART_ItemsPresenter"
                                     Items="{TemplateBinding Items}"
                                     ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    Margin="2"
                                     MemberSelector="{TemplateBinding MemberSelector}"/>
                     <Rectangle Name="iconSeparator"
-                               Fill="#ffd7d7d7"
+                               Fill="{StyleResource ThemeControlMidBrush}"
                                HorizontalAlignment="Left"
                                IsHitTestVisible="False"
                                Margin="29,2,0,2"
@@ -92,17 +92,17 @@
                    IsOpen="{TemplateBinding Path=IsSubMenuOpen, Mode=TwoWay}"
                    StaysOpen="True">
               <Border Background="{TemplateBinding Background}"
-                      BorderBrush="#ff999999"
-                      BorderThickness="1"
-                      Padding="2">
+                      BorderBrush="{StyleResource ThemeBorderMidBrush}"
+                      BorderThickness="1">
                 <ScrollViewer>
                   <Panel>
                     <ItemsPresenter Name="PART_ItemsPresenter"
                                     Items="{TemplateBinding Items}"
                                     ItemsPanel="{TemplateBinding ItemsPanel}"
+                                    Margin="2"
                                     MemberSelector="{TemplateBinding MemberSelector}"/>
                     <Rectangle Name="iconSeparator"
-                               Fill="#ffd7d7d7"
+                               Fill="{StyleResource ThemeControlMidBrush}"
                                HorizontalAlignment="Left"
                                IsHitTestVisible="False"
                                Margin="29,2,0,2"
@@ -118,13 +118,13 @@
   </Style>
 
   <Style Selector="MenuItem:selected /template/ Border#root">
-    <Setter Property="Background" Value="#3d26a0da"/>
-    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+    <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeAccentBrush}"/>
   </Style>
 
   <Style Selector="MenuItem:pointerover /template/ Border#root">
-    <Setter Property="Background" Value="#3d26a0da"/>
-    <Setter Property="BorderBrush" Value="#ff26a0da"/>
+    <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeAccentBrush}"/>
   </Style>
 
   <Style Selector="MenuItem:empty /template/ Path#rightArrow">

src/Perspex.Themes.Default/PopupRoot.paml

@@ -1,4 +1,5 @@
 <Style xmlns="https://github.com/perspex" Selector="PopupRoot">
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}">

src/Perspex.Themes.Default/ProgressBar.paml

@@ -1,6 +1,6 @@
 <Style xmlns="https://github.com/perspex" Selector="ProgressBar">
-  <Setter Property="Background" Value="#ffdddddd"/>
-  <Setter Property="Foreground" Value="#ffbee6fd"/>
+  <Setter Property="Background" Value="{StyleResource ThemeAccentBrush4}"/>
+  <Setter Property="Foreground" Value="{StyleResource ThemeAccentBrush}"/>
   <Setter Property="MinHeight" Value="14"/>
   <Setter Property="MinWidth" Value="200"/>
   <Setter Property="Template">

src/Perspex.Themes.Default/RadioButton.paml

@@ -1,17 +1,18 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="RadioButton">
-    <Setter Property="BorderBrush" Value="#ff333333"/>
-    <Setter Property="BorderThickness" Value="2"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Grid ColumnDefinitions="Auto,*">
-          <Ellipse Stroke="{TemplateBinding BorderBrush}"
+          <Ellipse Name="border"
+                   Stroke="{TemplateBinding BorderBrush}"
                    StrokeThickness="{TemplateBinding BorderThickness}"
                    Width="18"
                    Height="18"
                    VerticalAlignment="Center"/>
           <Ellipse Name="checkMark"
-                   Fill="{TemplateBinding BorderBrush}"
+                   Fill="{StyleResource HighlightBrush}"
                    Width="10"
                    Height="10"
                    Stretch="Uniform"
@@ -26,6 +27,9 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="RadioButton:pointerover /template/ Ellipse#border">
+    <Setter Property="Stroke" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="RadioButton /template/ Ellipse#checkMark">
     <Setter Property="IsVisible" Value="False"/>
   </Style>

src/Perspex.Themes.Default/ScrollBar.paml

@@ -2,7 +2,7 @@
   <Style Selector="ScrollBar">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="Silver">
+        <Border Background="{StyleResource ThemeControlMidBrush}">
           <Track Minimum="{TemplateBinding Minimum}"
                  Maximum="{TemplateBinding Maximum}"
                  Value="{TemplateBinding Path=Value, Mode=TwoWay}"
@@ -11,6 +11,7 @@
             <Thumb Name="thumb">
               <Thumb.Template>
                 <ControlTemplate>
+                  <!-- TODO: Find out why StyleResource doesn't work here -->
                   <Border Background="Gray"/>
                 </ControlTemplate>
               </Thumb.Template>

src/Perspex.Themes.Default/Separator.paml

@@ -3,19 +3,21 @@
   <Style Selector="Separator">
     <Setter Property="Template">
       <ControlTemplate>
-        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
+        <Border BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                Background="{TemplateBinding Background}"/>
       </ControlTemplate>
     </Setter>
   </Style>
 
   <Style Selector="MenuItem > Separator">
-    <Setter Property="Background" Value="#ffd7d7d7"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
     <Setter Property="Margin" Value="29,1,0,1"/>
     <Setter Property="Height" Value="1"/>
   </Style>
 
   <Style Selector="ContextMenu > Separator">
-    <Setter Property="Background" Value="#ffd7d7d7"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
     <Setter Property="Margin" Value="29,1,0,1"/>
     <Setter Property="Height" Value="1"/>
   </Style>

src/Perspex.Themes.Default/TabStripItem.paml

@@ -1,7 +1,7 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="TabStripItem">
-    <Setter Property="FontSize" Value="16"/>
-    <Setter Property="Foreground" Value="Gray"/>
+    <Setter Property="FontSize" Value="{StyleResource FontSizeLarge}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundLightBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Background="{TemplateBinding Background}"
@@ -15,6 +15,6 @@
     </Setter>
   </Style>
   <Style Selector="TabStripItem:selected">
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/TextBox.paml

@@ -1,23 +1,22 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="TextBox">
-    <Setter Property="Background" Value="White"/>
-    <Setter Property="BorderBrush" Value="#ff707070"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Padding" Value="2"/>
+    <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Padding" Value="4"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="border"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}"
-                Padding="2">
+                BorderThickness="{TemplateBinding BorderThickness}">
           <ScrollViewer CanScrollHorizontally="{TemplateBinding CanScrollHorizontally}"
                         HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
                         VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}">
             <StackPanel Margin="{TemplateBinding Padding}">
               <TextBlock Name="floatingWatermark"
-                         Foreground="#ff007ACC"
-                         FontSize="10"
+                         Foreground="{StyleResource ThemeAccentBrush}"
+                         FontSize="{StyleResource FontSizeSmall}"
                          Text="{TemplateBinding Watermark}">
                 <TextBlock.IsVisible>
                   <MultiBinding Converter="{Static BoolConverters.And}">
@@ -48,7 +47,10 @@
       </ControlTemplate>
     </Setter>
   </Style>
+  <Style Selector="TextBox:pointerover /template/ Border#border">
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
+  </Style>
   <Style Selector="TextBox:focus /template/ Border#border">
-    <Setter Property="BorderBrush" Value="Black"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderDarkBrush}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/ToggleButton.paml

@@ -1,9 +1,9 @@
 <Styles xmlns="https://github.com/perspex">
   <Style Selector="ToggleButton">
-    <Setter Property="Background" Value="#ffaaaaaa"/>
-    <Setter Property="BorderBrush" Value="#ffaaaaaa"/>
-    <Setter Property="BorderThickness" Value="2"/>
-    <Setter Property="Foreground" Value="Black"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlMidBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderLightBrush}"/>
+    <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+    <Setter Property="Foreground" Value="{StyleResource ThemeForegroundBrush}"/>
     <Setter Property="HorizontalContentAlignment" Value="Center"/>
     <Setter Property="VerticalContentAlignment" Value="Center"/>
     <Setter Property="Template">
@@ -24,16 +24,16 @@
     </Setter>
   </Style>
   <Style Selector="ToggleButton:checked /template/ Border#border">
-    <Setter Property="Background" Value="#ff777777"/>
-    <Setter Property="BorderBrush" Value="#ff777777"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="ToggleButton:pointerover /template/ Border#border">
-    <Setter Property="BorderBrush" Value="#ff888888"/>
+    <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
   </Style>
   <Style Selector="ToggleButton:pressed  /template/ Border#border">
-    <Setter Property="Background" Value="#ff888888"/>
+    <Setter Property="Background" Value="{StyleResource ThemeControlDarkBrush}"/>
   </Style>
   <Style Selector="ToggleButton:disabled">
-    <Setter Property="Opacity" Value="0.5"/>
+    <Setter Property="Opacity" Value="{StyleResource ThemeDisabledOpacity}"/>
   </Style>
 </Styles>

src/Perspex.Themes.Default/ToolTip.paml

@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="ToolTip">
-  <Setter Property="BorderBrush" Value="Gray"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
   <Setter Property="Padding" Value="4,2"/>
   <Setter Property="Template">
     <ControlTemplate>

src/Perspex.Themes.Default/TreeView.paml

@@ -1,16 +1,17 @@
 <Style xmlns="https://github.com/perspex" Selector="TreeView">
-  <Setter Property="BorderBrush" Value="Black"/>
-  <Setter Property="BorderThickness" Value="1"/>
+  <Setter Property="BorderBrush" Value="{StyleResource ThemeBorderMidBrush}"/>
+  <Setter Property="BorderThickness" Value="{StyleResource ThemeBorderThickness}"/>
+  <Setter Property="Padding" Value="4"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}"
               BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"
-              Padding="4">
+              BorderThickness="{TemplateBinding BorderThickness}">
         <ScrollViewer CanScrollHorizontally="True">
           <ItemsPresenter Name="PART_ItemsPresenter"
                           Items="{TemplateBinding Items}"
                           ItemsPanel="{TemplateBinding ItemsPanel}"
+                          Margin="{TemplateBinding Padding}"
                           MemberSelector="{TemplateBinding MemberSelector}"/>
         </ScrollViewer>
       </Border>

src/Perspex.Themes.Default/TreeViewItem.paml

@@ -36,7 +36,7 @@
                 Height="12"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center">
-          <Path Fill="Black"
+          <Path Fill="{StyleResource ThemeForegroundBrush}"
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
                 Data="M 0 2 L 4 6 L 0 10 Z"/>

src/Perspex.Themes.Default/Window.paml

@@ -1,6 +1,7 @@
 <Style xmlns="https://github.com/perspex" Selector="Window">
+  <Setter Property="Background" Value="{StyleResource ThemeBackgroundBrush}"/>
   <Setter Property="FontFamily" Value="Segoe UI"/>
-  <Setter Property="FontSize" Value="12"/>
+  <Setter Property="FontSize" Value="{StyleResource FontSizeNormal}"/>
   <Setter Property="Template">
     <ControlTemplate>
       <Border Background="{TemplateBinding Background}">