From 195ef79e0a3151007eaa3d3b64a8a79d269ee915 Mon Sep 17 00:00:00 2001
From: robloo <robloo@users.noreply.github.com>
Date: Sun, 31 Jul 2022 00:19:34 -0400
Subject: [PATCH] Convert ColorPicker default styles to ControlThemes

---
 .../Themes/Default/ColorPreviewer.xaml        |  23 +-
 .../Themes/Default/ColorSlider.xaml           | 346 +++++++++---------
 .../Themes/Default/ColorSpectrum.xaml         |  94 ++---
 .../Themes/Default/Default.xaml               |  76 ++--
 4 files changed, 274 insertions(+), 265 deletions(-)

diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
index c3bc7df4a4..e067fe4ab5 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml
@@ -1,15 +1,14 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+                    x:CompileBindings="True">
 
-  <Styles.Resources>
-    <pc:AccentColorConverter x:Key="AccentColorConverter" />
-    <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
-    <x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
-  </Styles.Resources>
+  <pc:AccentColorConverter x:Key="AccentColorConverter" />
+  <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
+  <x:Double x:Key="ColorPreviewerAccentSectionHeight">40</x:Double>
 
-  <Style Selector="ColorPreviewer">
+  <ControlTheme x:Key="{x:Type ColorPreviewer}"
+                TargetType="ColorPreviewer">
     <Setter Property="Height" Value="70" />
     <Setter Property="CornerRadius" Value="0" />
     <Setter Property="Template">
@@ -97,6 +96,6 @@
         </Panel>
       </ControlTemplate>
     </Setter>
-  </Style>
+  </ControlTheme>
 
-</Styles>
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
index 35cd7a9faa..9aa2dcd9f9 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml
@@ -1,188 +1,190 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    x:CompileBindings="True">
 
-  <Style Selector="Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderThickness" Value="0" />
+  <ControlTheme x:Key="ColorSliderThumbTheme"
+                TargetType="Thumb">
+    <Setter Property="Background" Value="Transparent" />
+    <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" />
+    <Setter Property="BorderThickness" Value="3" />
+    <Setter Property="CornerRadius" Value="10" />
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate>
           <Border Background="{TemplateBinding Background}"
                   BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}"
-                  CornerRadius="10" />
+                  CornerRadius="{TemplateBinding CornerRadius}" />
         </ControlTemplate>
       </Setter.Value>
     </Setter>
-  </Style>
+  </ControlTheme>
 
-  <Style Selector="ColorSlider:horizontal">
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="CornerRadius" Value="10" />
-    <Setter Property="Height" Value="20" />
-    <Setter Property="Template">
-      <ControlTemplate TargetType="{x:Type ColorSlider}">
-        <Border BorderThickness="{TemplateBinding BorderThickness}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Grid Margin="{TemplateBinding Padding}">
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{TemplateBinding Background}"
-                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-            <Track Name="PART_Track"
-                   HorizontalAlignment="Stretch"
-                   VerticalAlignment="Stretch"
-                   Minimum="{TemplateBinding Minimum}"
-                   Maximum="{TemplateBinding Maximum}"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
-                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                   Orientation="Horizontal">
-              <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.DecreaseButton>
-              <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.IncreaseButton>
-              <Thumb Classes="ColorSliderThumbStyle"
-                     Name="ColorSliderThumb"
-                     Margin="0"
-                     Padding="0"
-                     DataContext="{TemplateBinding Value}"
-                     Height="{TemplateBinding Height}"
-                     Width="{TemplateBinding Height}" />
-            </Track>
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+  <ControlTheme x:Key="{x:Type ColorSlider}"
+                TargetType="ColorSlider">
 
-  <Style Selector="ColorSlider:vertical">
-    <Setter Property="BorderThickness" Value="0" />
-    <Setter Property="CornerRadius" Value="10" />
-    <Setter Property="Width" Value="20" />
-    <Setter Property="Template">
-      <ControlTemplate TargetType="{x:Type ColorSlider}">
-        <Border BorderThickness="{TemplateBinding BorderThickness}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="{TemplateBinding CornerRadius}">
-          <Grid Margin="{TemplateBinding Padding}">
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-            <Rectangle HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch"
-                       Fill="{TemplateBinding Background}"
-                       RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                       RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-            <Track Name="PART_Track"
-                   HorizontalAlignment="Stretch"
-                   VerticalAlignment="Stretch"
-                   Minimum="{TemplateBinding Minimum}"
-                   Maximum="{TemplateBinding Maximum}"
-                   Value="{TemplateBinding Value, Mode=TwoWay}"
-                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                   Orientation="Vertical">
-              <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.DecreaseButton>
-              <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton"
-                              Background="Transparent"
-                              Focusable="False"
-                              HorizontalAlignment="Stretch"
-                              VerticalAlignment="Stretch">
-                  <RepeatButton.Template>
-                    <ControlTemplate>
-                      <Border Name="FocusTarget"
-                              Background="Transparent"
-                              Margin="0,-10" />
-                    </ControlTemplate>
-                  </RepeatButton.Template>
-                </RepeatButton>
-              </Track.IncreaseButton>
-              <Thumb Classes="ColorSliderThumbStyle"
-                     Name="ColorSliderThumb"
-                     Margin="0"
-                     Padding="0"
-                     DataContext="{TemplateBinding Value}"
-                     Height="{TemplateBinding Width}"
-                     Width="{TemplateBinding Width}" />
-            </Track>
-          </Grid>
-        </Border>
-      </ControlTemplate>
-    </Setter>
-  </Style>
+    <Style Selector="^:horizontal">
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="10" />
+      <Setter Property="Height" Value="20" />
+      <Setter Property="Template">
+        <ControlTemplate TargetType="{x:Type ColorSlider}">
+          <Border BorderThickness="{TemplateBinding BorderThickness}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Grid Margin="{TemplateBinding Padding}">
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{TemplateBinding Background}"
+                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+              <Track Name="PART_Track"
+                     HorizontalAlignment="Stretch"
+                     VerticalAlignment="Stretch"
+                     Minimum="{TemplateBinding Minimum}"
+                     Maximum="{TemplateBinding Maximum}"
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
+                     IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                     Orientation="Horizontal">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_DecreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_IncreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.IncreaseButton>
+                <Thumb Name="ColorSliderThumb"
+                       Theme="{StaticResource ColorSliderThumbTheme}"
+                       Margin="0"
+                       Padding="0"
+                       DataContext="{TemplateBinding Value}"
+                       Height="{TemplateBinding Height}"
+                       Width="{TemplateBinding Height}" />
+              </Track>
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
 
-  <!-- Normal State -->
-  <Style Selector="ColorSlider /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Background" Value="Transparent" />
-    <Setter Property="BorderBrush" Value="{DynamicResource ThemeForegroundBrush}" />
-    <Setter Property="BorderThickness" Value="3" />
-  </Style>
+    <Style Selector="^:vertical">
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="10" />
+      <Setter Property="Width" Value="20" />
+      <Setter Property="Template">
+        <ControlTemplate TargetType="{x:Type ColorSlider}">
+          <Border BorderThickness="{TemplateBinding BorderThickness}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius}">
+            <Grid Margin="{TemplateBinding Padding}">
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+              <Rectangle HorizontalAlignment="Stretch"
+                         VerticalAlignment="Stretch"
+                         Fill="{TemplateBinding Background}"
+                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+              <Track Name="PART_Track"
+                     HorizontalAlignment="Stretch"
+                     VerticalAlignment="Stretch"
+                     Minimum="{TemplateBinding Minimum}"
+                     Maximum="{TemplateBinding Maximum}"
+                     Value="{TemplateBinding Value, Mode=TwoWay}"
+                     IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                     Orientation="Vertical">
+                <Track.DecreaseButton>
+                  <RepeatButton Name="PART_DecreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.DecreaseButton>
+                <Track.IncreaseButton>
+                  <RepeatButton Name="PART_IncreaseButton"
+                                Background="Transparent"
+                                Focusable="False"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
+                    <RepeatButton.Template>
+                      <ControlTemplate>
+                        <Border Name="FocusTarget"
+                                Background="Transparent"
+                                Margin="0,-10" />
+                      </ControlTemplate>
+                    </RepeatButton.Template>
+                  </RepeatButton>
+                </Track.IncreaseButton>
+                <Thumb Name="ColorSliderThumb"
+                       Theme="{StaticResource ColorSliderThumbTheme}"
+                       Margin="0"
+                       Padding="0"
+                       DataContext="{TemplateBinding Value}"
+                       Height="{TemplateBinding Width}"
+                       Width="{TemplateBinding Width}" />
+              </Track>
+            </Grid>
+          </Border>
+        </ControlTemplate>
+      </Setter>
+    </Style>
+
+    <!-- Selector/Thumb Color -->
+    <Style Selector="^:pointerover /template/ Thumb#ColorSliderThumb">
+      <Setter Property="Opacity" Value="0.75" />
+    </Style>
+    <Style Selector="^:pointerover:dark-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="Opacity" Value="0.7" />
+    </Style>
+    <Style Selector="^:pointerover:light-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="Opacity" Value="0.8" />
+    </Style>
 
-  <!-- Selector/Thumb Color -->
-  <Style Selector="ColorSlider:pointerover /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.75" />
-  </Style>
-  <Style Selector="ColorSlider:pointerover:dark-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.7" />
-  </Style>
-  <Style Selector="ColorSlider:pointerover:light-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="Opacity" Value="0.8" />
-  </Style>
+    <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="BorderBrush" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
+      <Setter Property="BorderBrush" Value="White" />
+    </Style>
 
-  <Style Selector="ColorSlider:dark-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderBrush" Value="Black" />
-  </Style>
-  <Style Selector="ColorSlider:light-selector /template/ Thumb.ColorSliderThumbStyle">
-    <Setter Property="BorderBrush" Value="White" />
-  </Style>
+  </ControlTheme>
 
-</Styles>
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
index 0e57f6b483..0e137c89c6 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml
@@ -1,9 +1,10 @@
-<Styles xmlns="https://github.com/avaloniaui"
-        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:controls="using:Avalonia.Controls"
-        x:CompileBindings="True">
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:Avalonia.Controls"
+                    x:CompileBindings="True">
 
-  <Style Selector="ColorSpectrum">
+  <ControlTheme x:Key="{x:Type ColorSpectrum}"
+                TargetType="ColorSpectrum">
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="{x:Type ColorSpectrum}">
@@ -79,50 +80,51 @@
         </ControlTemplate>
       </Setter.Value>
     </Setter>
-  </Style>
 
-  <!-- Normal -->
-  <!-- Separating this allows easier customization in applications -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse,
-                   ColorSpectrum /template/ Rectangle#BorderRectangle">
-    <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
-    <Setter Property="StrokeThickness" Value="1" />
-  </Style>
+    <!-- Normal -->
+    <!-- Separating this allows easier customization in applications -->
+    <Style Selector="^ /template/ Ellipse#BorderEllipse,
+                     ^ /template/ Rectangle#BorderRectangle">
+      <Setter Property="Stroke" Value="{DynamicResource ThemeBorderLowBrush}" />
+      <Setter Property="StrokeThickness" Value="1" />
+    </Style>
 
-  <!-- Focus -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
+    <!-- Focus -->
+    <Style Selector="^ /template/ Ellipse#FocusEllipse">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="^:focus-visible /template/ Ellipse#FocusEllipse">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
 
-  <!-- Selector Color -->
-  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
-    <Setter Property="Stroke" Value="White" />
-  </Style>
-  <Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Stroke" Value="Black" />
-  </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
-    <Setter Property="Stroke" Value="Black" />
-  </Style>
-  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Stroke" Value="White" />
-  </Style>
+    <!-- Selector Color -->
+    <Style Selector="^ /template/ Ellipse#FocusEllipse">
+      <Setter Property="Stroke" Value="White" />
+    </Style>
+    <Style Selector="^ /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Stroke" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Ellipse#FocusEllipse">
+      <Setter Property="Stroke" Value="Black" />
+    </Style>
+    <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Stroke" Value="White" />
+    </Style>
 
-  <Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
-    <Setter Property="Opacity" Value="0.8" />
-  </Style>
+    <Style Selector="^:pointerover /template/ Ellipse#SelectionEllipse">
+      <Setter Property="Opacity" Value="0.8" />
+    </Style>
 
-  <!-- Selector Size -->
-  <Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
-    <Setter Property="Width" Value="16" />
-    <Setter Property="Height" Value="16" />
-  </Style>
-  <Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
-    <Setter Property="Width" Value="48" />
-    <Setter Property="Height" Value="48" />
-  </Style>
+    <!-- Selector Size -->
+    <Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
+      <Setter Property="Width" Value="16" />
+      <Setter Property="Height" Value="16" />
+    </Style>
+    <Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
+      <Setter Property="Width" Value="48" />
+      <Setter Property="Height" Value="48" />
+    </Style>
 
-</Styles>
+  </ControlTheme>
+
+</ResourceDictionary>
diff --git a/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml b/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
index db1fa3ee4e..b452e34394 100644
--- a/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
+++ b/src/Avalonia.Controls.ColorPicker/Themes/Default/Default.xaml
@@ -3,42 +3,48 @@
         xmlns:converters="using:Avalonia.Controls.Converters">
 
   <Styles.Resources>
-    <!-- Shared Resources -->
-    <VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
-                 TileMode="Tile"
-                 Stretch="Uniform"
-                 DestinationRect="0,0,8,8">
-      <VisualBrush.Visual>
-        <DrawingPresenter Width="8"
-                          Height="8">
-          <DrawingGroup>
-            <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
-                             Brush="Transparent" />
-            <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
-                             Brush="#19808080" />
-          </DrawingGroup>
-        </DrawingPresenter>
-      </VisualBrush.Visual>
-    </VisualBrush>
-    
-    <!-- Shared Converters -->
-    <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
-    <converters:ToBrushConverter x:Key="ToBrushConverter" />
-    <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
-    <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
-    <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
-    <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
-    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
-    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
-  </Styles.Resources>
+    <ResourceDictionary>
+
+      <!-- Shared Resources -->
+      <VisualBrush x:Key="ColorControlCheckeredBackgroundBrush"
+                   TileMode="Tile"
+                   Stretch="Uniform"
+                   DestinationRect="0,0,8,8">
+        <VisualBrush.Visual>
+          <DrawingPresenter Width="8"
+                            Height="8">
+            <DrawingGroup>
+              <GeometryDrawing Geometry="M0,0 L2,0 2,2, 0,2Z"
+                               Brush="Transparent" />
+              <GeometryDrawing Geometry="M0,1 L2,1 2,2, 1,2 1,0 0,0Z"
+                               Brush="#19808080" />
+            </DrawingGroup>
+          </DrawingPresenter>
+        </VisualBrush.Visual>
+      </VisualBrush>
+
+      <!-- Shared Converters -->
+      <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+      <converters:ToBrushConverter x:Key="ToBrushConverter" />
+      <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft"/>
+      <converters:CornerRadiusFilterConverter x:Key="RightCornerRadiusFilterConverter" Filter="TopRight, BottomRight"/>
+      <converters:CornerRadiusFilterConverter x:Key="TopCornerRadiusFilterConverter" Filter="TopLeft, TopRight"/>
+      <converters:CornerRadiusFilterConverter x:Key="BottomCornerRadiusFilterConverter" Filter="BottomLeft, BottomRight"/>
+      <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
+      <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
-  <!-- Primitives -->
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
-  <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
+      <ResourceDictionary.MergedDictionaries>
 
-  <!-- Controls -->
-  <!-- Note the ColorPicker and ColorView are unsupported in the default theme -->
-  <!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. -->
+        <!-- Primitives -->
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorPreviewer.xaml" />
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSlider.xaml" />
+        <ResourceInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Default/ColorSpectrum.xaml" />
 
+        <!-- Controls -->
+        <!-- Note the ColorPicker and ColorView are unsupported in the default theme -->
+        <!-- These controls depend on fluent styles for TabControl, Button, TextBox, etc. -->
+
+      </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+  </Styles.Resources>
 </Styles>