How do I create a custom theme?

[Shadowblitz16]

I was looking at https://docs.avaloniaui.net/docs/basics/user-interface/styling/control-themes trying to figure out how to make a custom theme, But couldn't figure it out.

How would I do something like this for a button's normal state?

Can I have an example in both C# and xaml?

I did manage to get a style to look like it with this...

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <Border MinWidth ="32" MinHeight="32" BorderThickness="1,1,0,0"  BorderBrush="#d79773">
            <Border BorderThickness="0,0,1,1" BorderBrush="#4f2b13">
                <Border BorderThickness="1,1,0,0" BorderBrush="#ffe3c3">
                    <Border BorderThickness="0,0,1,1" BorderBrush="#8b573b">
                        <Border Background="#d79773">
                            <!-- Add Controls for Previewer Here -->
                        </Border>
                    </Border>
                </Border>
            </Border>
        </Border>
    </Design.PreviewWith>

    <!-- Add Styles Here -->
</Styles>

but I don't understand how this applies to a control and/or a specific state like normal, hovered, focused, pressed, disabled.

[timunie]

Lookup other styles in source. AwsomeAvalonia has some styling libs referenced for you to get inspired

[Shadowblitz16]

Lookup other styles in source. AwsomeAvalonia has some styling libs referenced for you to get inspired

Those don't explain what is what though, only how it's done.
I want to understand how it works not just how to copy and paste someone else's code.

I want to know what each property is and how the theming system works

[maxkatz6]

I want to understand how it works not just how to copy and paste someone else's code.
I want to know what each property is and how the theming system works

You need to ask specific questions then.
Normally, when you want to know how internals work, you have to go way deeper than most developers do. In case of Avalonia, it's a bit easier since you can read the source code or related PRs.

[maxkatz6]

In the end, if you want to create a new theme, the best way is to learn how actual themes are implemented.

[maxkatz6]

I did manage to get a style to look like it with this...

Design.PreviewWith is not really a reusable part. It's only used for the previewer to render current XAML file.
As per that documentation page, you need to create a ControlTheme defined in the resources. And then reference it in your controls.

How would I do something like this for a button's normal state?

Going with the same example, you need to define ControlTheme and a ControlTemplate inside of it. Template is an actual "function" that builds the control each time it's displayed. And while on it, ContentPresenter is an actual container for the "Content" your control has. Without ContentPresenter it would be just a group of borders without anything inside.

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Design.PreviewWith>
    <Button Content="Hello World!"
            Theme="{StaticResource CustomTheme}"
            VerticalContentAlignment="Center" />
  </Design.PreviewWith>

  <ControlTheme TargetType="{x:Type Button}"
                x:Key="CustomTheme">
    <Setter Property="MinHeight" Value="32" />
    <Setter Property="MinWidth" Value="32" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border BorderThickness="1,1,0,0"  BorderBrush="#d79773">
          <Border BorderThickness="0,0,1,1" BorderBrush="#4f2b13">
            <Border BorderThickness="1,1,0,0" BorderBrush="#ffe3c3">
              <Border BorderThickness="0,0,1,1" BorderBrush="#8b573b">
                <Border Background="#d79773">
                  <ContentPresenter x:Name="PART_ContentPresenter"
                                    Content="{TemplateBinding Content}"
                                    Margin="{TemplateBinding Padding}"
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"  />
                </Border>
              </Border>
            </Border>
          </Border>
        </Border>
      </ControlTemplate>
    </Setter>
  </ControlTheme>
</ResourceDictionary>

Note, I did couple of changes just to make it easier to use:

1. Extracted MinWidth/MinHeight to setters, so it can be redefined on the button itself. If it was set on the Border directly, you wouldn't be able to change that value from the outside. TemplateBinding might have help, but there is no reason to use it in this scenario.
2. Added HorizontalContentAlignment + VerticalContentAlignment, and passed down to the content presenter.

Also, see other documentation pages that are useful:
https://docs.avaloniaui.net/docs/guides/custom-controls/how-to-create-templated-controls
https://docs.avaloniaui.net/docs/reference/styles/style-selector-syntax

[Shadowblitz16]

Thankyou so much for explaining!

So what is the PART_ContentPresenter string mean?
And is the "^:" part necessary on state selection?

[maxkatz6]

So what is the PART_ContentPresenter string mean?

That's a name of the template part. ContentControls (including Button) look for this part of the template by name, so they can setup components tree properly.

And is the "^:" part necessary on state selection?

"^" part is necessary, because this selector is relative to the control theme and not global. It's essentially required on any nested styles https://docs.avaloniaui.net/docs/reference/styles/style-selector-syntax#nesting

[Shadowblitz16]

@maxkatz6 how do I access my named Borders and set it's BorderBrush?

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Add Resources Here -->
    <Design.PreviewWith>
        <Button Content="Hello World!"
                Theme="{StaticResource OldSchool}"
                VerticalContentAlignment="Center"/>
    </Design.PreviewWith>
    
    <FontFamily x:Key="Sans">/Themes/OldSchool/Fonts/SansSerif.ttf</FontFamily>
    <ControlTheme TargetType="{x:Type Button}" x:Key="OldSchool">
        <Setter Property="Template">
            <ControlTemplate>
                <Border x:Name="OuterBorderMin" BorderThickness="1,1,0,0" BorderBrush="#d79773">
                    <Border x:Name="OuterBorderMax" BorderThickness="0,0,1,1" BorderBrush="#4f2b13">
                        <Border x:Name="InnerBorderMin" BorderThickness="1,1,0,0" BorderBrush="#ffe3c3">
                            <Border x:Name="InnerBorderMax" BorderThickness="0,0,1,1" BorderBrush="#8b573b">
                                <Border BorderThickness="3,3,3,3" BorderBrush="#d79773" Background="#d79773">
                                    <ContentPresenter x:Name="PART_ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}"
                                          Foreground="Black"
                                          FontFamily="Sans"
                                          FontSize="9"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"  />
                                </Border>
                            </Border>
                        </Border> 
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter>
        <Style Selector="^:pressed>
            <Setter Property="Opacity" Value="0.8" />
        </Style>
    </ControlTheme>
</ResourceDictionary>

Also it would be nice if I could export the colors to the root of the theme.

[maxkatz6]

@Shadowblitz16 you need template and name selectors

    <Style Selector="^:pointerover /template/ Border#InnerBorderMin">
      <Setter Property="Opacity" Value="0.9" />
    </Style>

[maxkatz6]

Also it would be nice if I could export the colors to the root of the theme.

Yeah, you can do that. Define colors in the root resource dictionary. And use DynamicResource to reference them by key where its used.
https://docs.avaloniaui.net/docs/guides/styles-and-resources/resources