fix(CaptionButton): theme used hardcoded Background, Foreground and BorderBrush color (#13373)

* fix(CaptionButtons): FluentCaptionButton theme used hardcoded Background, Foreground and BorderBrush color

* fix(CaptionButtons): SimpleCaptionButton theme used hardcoded Background, Foreground and BorderBrush color

src/Avalonia.Themes.Fluent/Accents/FluentControlResources.xaml

@@ -784,6 +784,11 @@
       <!-- BaseResources for RefreshVisualizer.xaml -->
       <SolidColorBrush x:Key="RefreshVisualizerForeground" Color="Black" />
       <SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
+      
+      <!-- BaseResources for CaptionButtons.xaml -->
+      <SolidColorBrush x:Key="CaptionButtonForeground" Color="Black" />
+      <SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />
+      <SolidColorBrush x:Key="CaptionButtonBorderBrush" Color="#ffcacaca" />
     </ResourceDictionary>
     <ResourceDictionary x:Key="Dark">
       <!-- Resources for Button.xaml -->
@@ -1571,6 +1576,11 @@
       <!-- BaseResources for RefreshVisualizer.xaml -->
       <SolidColorBrush x:Key="RefreshVisualizerForeground" Color="White" />
       <SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
+
+      <!-- BaseResources for CaptionButtons.xaml -->
+      <SolidColorBrush x:Key="CaptionButtonForeground" Color="White" />
+      <SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />
+      <SolidColorBrush x:Key="CaptionButtonBorderBrush" Color="#ffcacaca" />
     </ResourceDictionary>
   </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>

src/Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml

@@ -1,20 +1,32 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     x:ClassModifier="internal">
+
+  <x:Double x:Key="CaptionButtonWidth">45</x:Double>
+  <x:Double x:Key="CaptionButtonHeight">30</x:Double>
+
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
-        <CaptionButtons Height="30"/>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+          <Border Background="Black">
+            <CaptionButtons Height="30"/>
+          </Border>
+        </ThemeVariantScope>
+        <ThemeVariantScope RequestedThemeVariant="Light">
+          <CaptionButtons Height="30"/>
+        </ThemeVariantScope>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
 
   <ControlTheme x:Key="FluentCaptionButton" TargetType="Button">
-    <Setter Property="Background" Value="#ffe5e5e5" />
+    <Setter Property="Background" Value="{DynamicResource CaptionButtonBackground}" />
     <!-- Reusing BorderBrush to define pressed background color, as it's not used otherwise -->
-    <Setter Property="BorderBrush" Value="#ffcacaca" />
-    <Setter Property="Foreground" Value="Black"/>
-    <Setter Property="Width" Value="45"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonBorderBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}"/>
+    <Setter Property="Width" Value="{DynamicResource CaptionButtonWidth}"/>
+    <Setter Property="Height" Value="{DynamicResource CaptionButtonHeight}"/>
     <Setter Property="VerticalAlignment" Value="Stretch"/>
     <Setter Property="Template">
       <ControlTemplate>

src/Avalonia.Themes.Simple/Accents/Base.xaml

@@ -39,6 +39,13 @@
 
       <SolidColorBrush x:Key="RefreshVisualizerForeground" Color="Black" />
       <SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
+
+
+      <!-- BaseResources for CaptionButtons.xaml -->
+      <SolidColorBrush x:Key="CaptionButtonForeground" Color="Black" />
+      <SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />
+      <SolidColorBrush x:Key="CaptionButtonBorderBrush" Color="#ffcacaca" />
+      
     </ResourceDictionary>
     <ResourceDictionary x:Key="Dark">
       <Color x:Key="ThemeBackgroundColor">#FF282828</Color>
@@ -75,6 +82,12 @@
 
       <SolidColorBrush x:Key="RefreshVisualizerForeground" Color="White" />
       <SolidColorBrush x:Key="RefreshVisualizerBackground" Color="Transparent" />
+
+
+      <!-- BaseResources for CaptionButtons.xaml -->
+      <SolidColorBrush x:Key="CaptionButtonForeground" Color="White" />
+      <SolidColorBrush x:Key="CaptionButtonBackground" Color="#ffe5e5e5" />
+      <SolidColorBrush x:Key="CaptionButtonBorderBrush" Color="#ffcacaca" />
     </ResourceDictionary>
   </ResourceDictionary.ThemeDictionaries>
   <FontFamily x:Key="ContentControlThemeFontFamily">fonts:Inter#Inter, $Default</FontFamily>

src/Avalonia.Themes.Simple/Controls/CaptionButtons.xaml

@@ -4,18 +4,28 @@
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel Spacing="20">
-        <CaptionButtons Height="30" />
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+          <Border Background="Black">
+            <CaptionButtons Height="30"/>
+          </Border>
+        </ThemeVariantScope>
+        <ThemeVariantScope RequestedThemeVariant="Light">
+          <CaptionButtons Height="30"/>
+        </ThemeVariantScope>
       </StackPanel>
     </Border>
   </Design.PreviewWith>
 
+  <x:Double x:Key="CaptionButtonWidth">45</x:Double>
+  <x:Double x:Key="CaptionButtonHeight">30</x:Double>
+
   <ControlTheme x:Key="SimpleCaptionButton"
                 TargetType="Button">
-    <Setter Property="Background" Value="#ffe5e5e5" />
+    <Setter Property="Background" Value="{DynamicResource CaptionButtonBackground}" />
     <!--  Reusing BorderBrush to define pressed background color, as it's not used otherwise  -->
-    <Setter Property="BorderBrush" Value="#ffcacaca" />
-    <Setter Property="Foreground" Value="Black" />
-    <Setter Property="Width" Value="45" />
+    <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonBorderBrush}" />
+    <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}"/>    <Setter Property="Width" Value="{DynamicResource CaptionButtonWidth}"/>
+    <Setter Property="Height" Value="{DynamicResource CaptionButtonHeight}"/>
     <Setter Property="VerticalAlignment" Value="Stretch" />
     <Setter Property="Template">
       <ControlTemplate>