feat: add Themes.

demo/Ursa.Demo/Pages/DualBadgeDemo.axaml

@@ -12,7 +12,7 @@
         <u:DualBadge>
             2.4k
         </u:DualBadge>
-        
+
         <u:DualBadge>
             <u:DualBadge.Icon>
                 <PathIcon
@@ -22,12 +22,12 @@
             </u:DualBadge.Icon>
             2.4k
         </u:DualBadge>
-        
+
         <u:DualBadge
             Header="downloads">
             2.4k
         </u:DualBadge>
-        
+
         <u:DualBadge
             Header="downloads">
             <u:DualBadge.Icon>
@@ -39,5 +39,70 @@
             2.4k
         </u:DualBadge>
 
+        <!--
+        <u:DualBadge Classes="FlatSquare">
+            2.4k
+        </u:DualBadge>
+
+        <u:DualBadge Classes="FlatSquare">
+            <u:DualBadge.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
+            </u:DualBadge.Icon>
+            2.4k
+        </u:DualBadge>
+
+        <u:DualBadge 
+            Classes="FlatSquare"
+            Header="downloads">
+            2.4k
+        </u:DualBadge>
+
+        <u:DualBadge
+            Classes="FlatSquare"
+            Header="downloads">
+            <u:DualBadge.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
+            </u:DualBadge.Icon>
+            2.4k
+        </u:DualBadge>
+        -->
+
+        <u:DualBadge Theme="{StaticResource ForTheBadge}">
+            2.4K
+        </u:DualBadge>
+
+        <u:DualBadge Theme="{StaticResource ForTheBadge}">
+            <u:DualBadge.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
+            </u:DualBadge.Icon>
+            2.4K
+        </u:DualBadge>
+
+        <u:DualBadge 
+            Theme="{StaticResource ForTheBadge}"
+            Header="DOWNLOADS">
+            2.4K
+        </u:DualBadge>
+
+        <u:DualBadge
+            Theme="{StaticResource ForTheBadge}"
+            Header="DOWNLOADS">
+            <u:DualBadge.Icon>
+                <PathIcon
+                    Width="14"
+                    Height="14"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7ZM9 10.75C9 10.3358 9.33579 10 9.75 10H12.5C13.0523 10 13.5 10.4477 13.5 11V16.5H14.25C14.6642 16.5 15 16.8358 15 17.25C15 17.6642 14.6642 18 14.25 18H9.75C9.33579 18 9 17.6642 9 17.25C9 16.8358 9.33579 16.5 9.75 16.5H10.5V11.5H9.75C9.33579 11.5 9 11.1642 9 10.75Z" />
+            </u:DualBadge.Icon>
+            2.4K
+        </u:DualBadge>
     </StackPanel>
 </UserControl>

src/Ursa.Themes.Semi/Controls/DualBadge.axaml

@@ -63,4 +63,28 @@
             <Setter Property="HeaderBackground" Value="{Binding Background, RelativeSource={RelativeSource Self}}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme
+        x:Key="FlatSquare"
+        BasedOn="{StaticResource {x:Type u:DualBadge}}"
+        TargetType="u:DualBadge">
+        <Setter Property="CornerRadius" Value="0" />
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="Plastic"
+        BasedOn="{StaticResource {x:Type u:DualBadge}}"
+        TargetType="u:DualBadge">
+        <Setter Property="Background">
+
+        </Setter>
+    </ControlTheme>
+    <ControlTheme
+        x:Key="ForTheBadge"
+        BasedOn="{StaticResource {x:Type u:DualBadge}}"
+        TargetType="u:DualBadge">
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Padding" Value="12 6" />
+
+    </ControlTheme>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Dark/DualBadge.axaml

@@ -3,5 +3,12 @@
     <SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
     <SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF888D92</SolidColorBrush>
     <SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
-    <SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF5DC264</SolidColorBrush>
+    <LinearGradientBrush x:Key="DualBadgeDefaultHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF555B61" Offset="0" />
+        <GradientStop Color="#FF41464C" Offset="1" />
+    </LinearGradientBrush>
+    <LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5AC262" Offset="0" />
+        <GradientStop Color="#FF3BB346" Offset="1" />
+    </LinearGradientBrush>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Light/DualBadge.axaml

@@ -1,7 +1,14 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="DualBadgeDefaultIconForeground">White</SolidColorBrush>
     <SolidColorBrush x:Key="DualBadgeDefaultHeaderForeground">White</SolidColorBrush>
-    <SolidColorBrush x:Key="DualBadgeDefaultHeaderBackground">#FF6B7075</SolidColorBrush>
+    <LinearGradientBrush x:Key="DualBadgeDefaultHeaderBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF555B61" Offset="0" />
+        <GradientStop Color="#FF41464C" Offset="1" />
+    </LinearGradientBrush>
     <SolidColorBrush x:Key="DualBadgeDefaultForeground">White</SolidColorBrush>
-    <SolidColorBrush x:Key="DualBadgeDefaultBackground">#FF3BB346</SolidColorBrush>
+    <LinearGradientBrush x:Key="DualBadgeDefaultBackground" StartPoint="0%,0%" EndPoint="0%,100%">
+        <GradientStop Color="#FF5AC262" Offset="0" />
+        <GradientStop Color="#FF3BB346" Offset="1" />
+    </LinearGradientBrush>
+
 </ResourceDictionary>

src/Ursa/Controls/DualBadge.cs

@@ -4,7 +4,6 @@ using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
 using Avalonia.Controls.Primitives;
 using Avalonia.Controls.Templates;
-using Avalonia.Interactivity;
 using Avalonia.Media;
 
 namespace Ursa.Controls;
@@ -72,9 +71,9 @@ public class DualBadge : HeaderedContentControl
         ContentProperty.Changed.AddClassHandler<DualBadge>((o, args) => o.OnContentChanged());
     }
 
-    protected override void OnLoaded(RoutedEventArgs e)
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
-        base.OnLoaded(e);
+        base.OnApplyTemplate(e);
         OnIconChanged();
         OnHeaderChanged();
         OnContentChanged();