Use theme colors in ControlCatalog.

And demonstrate changing theme colors for a single button.

samples/ControlCatalog/Pages/BorderPage.paml

@@ -7,19 +7,22 @@
                 Margin="0,16,0,0"
                 HorizontalAlignment="Center"
                 Gap="16">
-      <Border BorderBrush="#f44336" BorderThickness="2" Padding="16">
+      <Border BorderBrush="{StyleResource ThemeAccentBrush}" BorderThickness="2" Padding="16">
         <TextBlock>Border</TextBlock>
       </Border>
-      <Border Background="#f44336" BorderBrush="#4285f4" BorderThickness="4" Padding="16">
+      <Border Background="{StyleResource ThemeAccentBrush2}" 
+              BorderBrush="{StyleResource ThemeAccentBrush}" 
+              BorderThickness="4" 
+              Padding="16">
         <TextBlock>Border and Background</TextBlock>
       </Border>
-      <Border BorderBrush="#4285f4" 
+      <Border BorderBrush="{StyleResource ThemeAccentBrush}"
               BorderThickness="4" 
               CornerRadius="8"
               Padding="16">
         <TextBlock>Rounded Corners</TextBlock>
       </Border>
-      <Border Background="#f44336" 
+      <Border Background="{StyleResource ThemeAccentBrush2}"
               CornerRadius="8"
               Padding="16">
         <TextBlock>Rounded Corners</TextBlock>

samples/ControlCatalog/Pages/ButtonPage.paml

@@ -1,4 +1,5 @@
-<UserControl xmlns="https://github.com/perspex">
+<UserControl xmlns="https://github.com/perspex"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <StackPanel Orientation="Vertical" Gap="4">
     <TextBlock Classes="h1">Button</TextBlock>
     <TextBlock Classes="h2">A button control</TextBlock>
@@ -9,18 +10,27 @@
                 Gap="16">
       <StackPanel Orientation="Vertical" Gap="8" Width="150">
         <Button>Button</Button>
-        <Button Foreground="Blue">Foreground</Button>
-        <Button Background="#f44336">Background</Button>
+        <Button Foreground="White">Foreground</Button>
+        <Button Background="{StyleResource ThemeAccentBrush}">Background</Button>
         <Button IsEnabled="False">Disabled</Button>
+        <Button Content="Re-themed">
+          <Button.Styles>
+            <Style>
+              <Style.Resources>
+                <SolidColorBrush x:Key="ThemeBorderMidBrush">Red</SolidColorBrush>
+                <SolidColorBrush x:Key="ThemeControlDarkBrush">DarkRed</SolidColorBrush>
+              </Style.Resources>
+            </Style>
+          </Button.Styles>          
+        </Button>
       </StackPanel>
 
       <StackPanel Orientation="Vertical" Gap="8" Width="150">
         <Button BorderThickness="0">No Border</Button>
-        <Button BorderBrush="#f44336">Border Color</Button>
-        <Button BorderBrush="#f44336" BorderThickness="4">Thick Border</Button>
-        <Button BorderBrush="#f44336" BorderThickness="4" IsEnabled="False">Disabled</Button>
+        <Button BorderBrush="{StyleResource ThemeAccentBrush}">Border Color</Button>
+        <Button BorderBrush="{StyleResource ThemeAccentBrush}" BorderThickness="4">Thick Border</Button>
+        <Button BorderBrush="{StyleResource ThemeAccentBrush}" BorderThickness="4" IsEnabled="False">Disabled</Button>
       </StackPanel>
-    </StackPanel>
-    
+    </StackPanel>    
   </StackPanel>
 </UserControl>

samples/ControlCatalog/Pages/DropDownPage.paml

@@ -14,7 +14,7 @@
       <DropDown SelectedIndex="0">
         <DropDownItem>
           <Panel>
-            <Rectangle Fill="Red"/>
+            <Rectangle Fill="{StyleResource ThemeAccentBrush}"/>
             <TextBlock Margin="8">Control Items</TextBlock>
           </Panel>
         </DropDownItem>