Avalonia/samples/ControlCatalog/CustomThemes.xaml

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="using:ControlCatalog.Controls">
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Dark">
      <Color x:Key="HamburgerBaseHighColor">#99FFFFFF</Color>
      <Color x:Key="HamburgerChromeMediumColor">#FF1F1F1F</Color>
      <Color x:Key="HamburgerAltHighColor">#FF000000</Color>
      <Color x:Key="HamburgerChromeLowColor">#FF171717</Color>
      <SolidColorBrush x:Key="HomeCardBackground" Color="#2B2B33" />
      <SolidColorBrush x:Key="HomeCardBorderBrush" Color="#3A3A45" />
      <SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#8AB4FF" />
      <SolidColorBrush x:Key="HomeSubtleForeground" Color="#9C9CAB" />
      <SolidColorBrush x:Key="HomeBadgeBackground" Color="#31395A" />
      <SolidColorBrush x:Key="HomeBadgeForeground" Color="#8AB4FF" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Default">
      <Color x:Key="HamburgerBaseHighColor">#99000000</Color>
      <Color x:Key="HamburgerChromeMediumColor">#FFE6E6E6</Color>
      <Color x:Key="HamburgerAltHighColor">#FFFFFFFF</Color>
      <Color x:Key="HamburgerChromeLowColor">#FFF2F2F2</Color>
      <SolidColorBrush x:Key="HomeCardBackground" Color="#FFFFFF" />
      <SolidColorBrush x:Key="HomeCardBorderBrush" Color="#E5E5EA" />
      <SolidColorBrush x:Key="HomeCardBorderBrushHover" Color="#3E6DF3" />
      <SolidColorBrush x:Key="HomeSubtleForeground" Color="#64646E" />
      <SolidColorBrush x:Key="HomeBadgeBackground" Color="#E8EFFD" />
      <SolidColorBrush x:Key="HomeBadgeForeground" Color="#3462D9" />
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>

  <ControlTheme x:Key="ButtonCardTheme" TargetType="Button">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="{DynamicResource HomeCardBackground}" />
    <Setter Property="BorderBrush" Value="{DynamicResource HomeCardBorderBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="10" />
    <Setter Property="Padding" Value="16, 14" />
    <Setter Property="MinHeight" Value="118" />
    <Setter Property="Cursor" Value="Hand" />

    <Style Selector="^ /template/ ContentPresenter">
      <Setter Property="BoxShadow" Value="0 1 3 0 #0D000000" />
      <Setter Property="Transitions">
        <Transitions>
          <BrushTransition Property="BorderBrush" Duration="0:0:0.1" />
        </Transitions>
      </Setter>
    </Style>

    <Style Selector="^:pointerover /template/ ContentPresenter">
      <Setter Property="BorderBrush" Value="{DynamicResource HomeCardBorderBrushHover}" />
    </Style>

  </ControlTheme>

  <x:Double x:Key="NavigationItemHeight">36</x:Double>
  <BoxShadows x:Key="NavigationItemShadow">1 1 1 1 #2000, 0 0 1 1 #2fff</BoxShadows>
  <Thickness x:Key="NavigationItemPadding">8,0,4,0</Thickness>
  <Thickness x:Key="NavigationItemSelectionPillMargin">2,0,0,0</Thickness>
  <x:Double x:Key="SelectionPipeHeight">12</x:Double>

  <ControlTheme x:Key="ScrollPage" TargetType="ContentPage">
    <Setter Property="Background" Value="{DynamicResource PageBackgroundColor}"/>
    <Setter Property="CornerRadius" Value="20,0,0,0"/>
    <Setter Property="Template">
      <ControlTemplate>
        <Border
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          Background="{TemplateBinding Background}"
          CornerRadius="{TemplateBinding CornerRadius}">
          <DockPanel>
            <ContentPresenter Name="PART_TopCommandBar"
                              DockPanel.Dock="Top"
                              HorizontalContentAlignment="Stretch"
                              IsVisible="False" />
            <ContentPresenter Name="PART_BottomCommandBar"
                              DockPanel.Dock="Bottom"
                              HorizontalContentAlignment="Stretch"
                              IsVisible="False" />

            <ScrollViewer Padding="20"
                          HorizontalScrollBarVisibility="Disabled">
              <ContentPresenter Name="PART_ContentPresenter"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                CornerRadius="{TemplateBinding CornerRadius}" />
            </ScrollViewer>
          </DockPanel>
        </Border>
      </ControlTemplate>
    </Setter>
  </ControlTheme>
  <ControlTheme x:Key="NavHeaderItem" TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
    <Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" />
    <Setter Property="Margin" Value="4,2,8,0" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ClipToBounds" Value="False" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="PART_LayoutRoot"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
          <Panel>
            <Border Name="PART_SelectedPipe"
                    Width="{DynamicResource TabItemPipeThickness}"
                    Height="{DynamicResource SelectionPipeHeight}"
                    Margin="{DynamicResource NavigationItemSelectionPillMargin}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
                    IsVisible="False"
                    CornerRadius="4"/>
            <ContentPresenter Name="PART_ContentPresenter"
                              Padding="{TemplateBinding Padding}"
                              Margin="0"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              TextElement.FontFamily="{TemplateBinding FontFamily}"
                              TextElement.FontSize="{TemplateBinding FontSize}"
                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
          </Panel>
        </Border>
      </ControlTemplate>
    </Setter>

    <Style Selector="^:pointerover, ^:selected">
      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>

      <Style Selector="^ /template/ Border#PART_LayoutRoot">
        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
        <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
        <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
      </Style>
    </Style>

    <Style Selector="^:selected">
      <Style Selector="^ /template/ Border#PART_SelectedPipe">
        <Setter Property="IsVisible" Value="True" />
      </Style>
    </Style>

    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
    </Style>
  </ControlTheme>
  <ControlTheme x:Key="SelectableItemButton" TargetType="controls:SelectableButton">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
    <Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ClipToBounds" Value="False" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="PART_LayoutRoot"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
          <Panel>
            <Border Name="PART_SelectedPipe"
                    Width="{DynamicResource TabItemPipeThickness}"
                    Height="{DynamicResource SelectionPipeHeight}"
                    Margin="{DynamicResource NavigationItemSelectionPillMargin}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
                    IsVisible="False"
                    CornerRadius="4"/>
            <ContentPresenter Name="PART_ContentPresenter"
                              Padding="{TemplateBinding Padding}"
                              Margin="0"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              TextElement.FontFamily="{TemplateBinding FontFamily}"
                              TextElement.FontSize="{TemplateBinding FontSize}"
                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
          </Panel>
        </Border>
      </ControlTemplate>
    </Setter>

    <Style Selector="^:pointerover, ^:selected">
      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>

      <Style Selector="^ /template/ Border#PART_LayoutRoot">
        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
        <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      </Style>
    </Style>

    <Style Selector="^:selected">
      <Style Selector="^ /template/ Border#PART_SelectedPipe">
        <Setter Property="IsVisible" Value="True" />
      </Style>
    </Style>

    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
    </Style>
  </ControlTheme>

  <ControlTheme x:Key="ExpanderToggleButton" TargetType="ToggleButton">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Height" Value="{StaticResource NavigationItemHeight}" />
    <Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ClipToBounds" Value="False" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="PART_LayoutRoot"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
          <Panel>
            <Border Name="PART_SelectedPipe"
                    Width="{DynamicResource TabItemPipeThickness}"
                    Height="{DynamicResource SelectionPipeHeight}"
                    Margin="{DynamicResource NavigationItemSelectionPillMargin}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Background="{DynamicResource TabItemHeaderSelectedPipeFill}"
                    IsVisible="False"
                    CornerRadius="4"/>
            <ContentPresenter Name="PART_ContentPresenter"
                              Padding="{TemplateBinding Padding}"
                              Margin="0"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              Content="{TemplateBinding Content}"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              TextElement.FontFamily="{TemplateBinding FontFamily}"
                              TextElement.FontSize="{TemplateBinding FontSize}"
                              TextElement.FontWeight="{TemplateBinding FontWeight}" />
          </Panel>
        </Border>
      </ControlTemplate>
    </Setter>

    <Style Selector="^:pointerover, ^:selected">
      <Setter Property="Background" Value="{DynamicResource ThemeControlHighlightMidBrush}"/>

      <Style Selector="^ /template/ Border#PART_LayoutRoot">
        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
        <Setter Property="BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      </Style>
    </Style>

    <Style Selector="^:checked">
      <Style Selector="^ /template/ Border#PART_SelectedPipe">
        <Setter Property="IsVisible" Value="True" />
      </Style>
    </Style>

    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
    </Style>
  </ControlTheme>
  <ControlTheme x:Key="HomeSectionExpander" TargetType="controls:HomeItemExpander">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="MinHeight" Value="{StaticResource NavigationItemHeight}" />
    <Setter Property="Padding" Value="{DynamicResource NavigationItemPadding}" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="ClipToBounds" Value="False" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="PART_LayoutRoot"
                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
          <Grid RowDefinitions="Auto,*">
            <controls:SelectableButton x:Name="ExpanderHeader"
                                       HorizontalAlignment="Stretch"
                                       MinHeight="{TemplateBinding MinHeight}"
                                       CornerRadius="{TemplateBinding CornerRadius}"
                                       IsEnabled="{TemplateBinding IsEnabled}"
                                       Content="{TemplateBinding Header}"
                                       Command="{TemplateBinding Command}"
                                       CommandParameter="{TemplateBinding CommandParameter}"
                                       Theme="{StaticResource SelectableItemButton}"
                                       Background="{TemplateBinding Background}"
                                       IsSelected="{TemplateBinding IsSelected}"
                                       IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
                                       ContentTemplate="{TemplateBinding HeaderTemplate}" >
            </controls:SelectableButton>
            <Border x:Name="ExpanderContent"
                    Grid.Row="1"
                    IsVisible="{TemplateBinding IsEffectivelyExpanded, Mode=TwoWay}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    MinHeight="{TemplateBinding MinHeight}"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="{TemplateBinding Padding}">
              <ContentPresenter x:Name="PART_ContentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
            </Border>
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter>

    <Style Selector="^:pointerover">
      <Style Selector="^ /template/ controls|SelectableButton#ExpanderHeader">
        <Setter Property="Background" Value="{DynamicResource HamburgerChromeLowColor}" />
      </Style>
    </Style>

    <Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
      <Setter Property="Border.Background" Value="{DynamicResource HamburgerChromeLowColor}" />
      <Setter Property="Border.BoxShadow" Value="{StaticResource NavigationItemShadow}" />
      <Setter Property="TextElement.Foreground" Value="{DynamicResource HamburgerBaseHighColor}" />
    </Style>
  </ControlTheme>
</ResourceDictionary>