Best Practices for Theme Usage (Dark, Light, System) From Xamarin.Forms to AvaloniaUI

[vardansargsyan92]

Hello everyone! I'm in the process of migrating the project styles from Xamarin.Forms to AvaloniaUI and would love some guidance on whether I've chosen the right approach. I've set up separate resource dictionaries for colors, themes, and styles, and created a simple app to showcase the theme-switching ecosystem. However, there are a couple of aspects that I'm not entirely clear on, so I would greatly appreciate your assistance in gaining a better understanding.

Sample

1. Difference Between Styles and Themes:
   Could someone clarify the distinction between styles and themes in AvaloniaUI? I find it confusing and would appreciate a clear explanation to understand better how they interact and when to use each.

2. Resetting Base Styles with ControlTheme Definition:
   I've noticed that when I define a ControlTheme, it resets the entire base styles of a control. Can someone shed light on why this happens? Understanding the mechanism behind this behavior would be immensely helpful for better control and customization.

for instance, I have the following control theme (ButtonThemes.axaml in the Themes directory)

<ControlTheme
     x:Key="AcceptButtonTheme"
     BasedOn="{StaticResource DefaultButtonTheme}"
     TargetType="Button">
     <Setter Property="Background" Value="{DynamicResource BackgroundBrush}" />
     <Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}" />
     <Setter Property="Template">
         <ControlTemplate>
             <Panel>
                 <Border
                     Background="{TemplateBinding Background}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch">
                     <ContentPresenter
                         x:Name="PART_ContentPresenter"
                         Content="{TemplateBinding Content}"
                         Margin="{TemplateBinding Padding}" />
                 </Border>
             </Panel>
         </ControlTemplate>
     </Setter>
     <Style Selector="^:pointerover">
         <Setter Property="Background" Value="{StaticResource AccentButtonBackground}" />
         <Setter Property="Foreground" Value="White" />
     </Style>
 </ControlTheme>

if I apply this theme without the <Style Selector="^:pointerover"> then I do not have any pointer over effect (even the base one)
or if I apply the theme without the <Setter Property="Template"> then the button is not rendered at all. I mean when I create a theme I have to set all properties that I do not do in the styles (see ButtonStyles.axaml in Styles)

3. Runtime Theme Switching on Android:
   I've encountered an issue where the app theme doesn't switch runtime on Android when I change the system theme of the device (the RequestedThemeVariant is set to default). Has anyone else faced this, and is there a recommended solution or workaround?

4. Best Practices for Theme Usage (Dark, Light):
   I'm looking for advice on the best practices for using themes, especially when dealing with dark and light themes. Does my sample app look ok or I am doing something wrong? What are the recommended approaches, and do you think there are any pitfalls to avoid? Any insights or experiences shared would be greatly appreciated.

[rabbitism]

The best entry point is official documentation

https://docs.avaloniaui.net/docs/next/basics/user-interface/styling/

[maxkatz6]

For custom defined resources per different theme variants, see https://docs.avaloniaui.net/docs/next/guides/styles-and-resources/how-to-use-theme-variants

Also https://docs.avaloniaui.net/docs/next/guides/styles-and-resources/resources can be useful

In short, you define theme dictionaries per each theme variant (dark, light...) that you use, and then you can reference them by DynamicResource.

[vardansargsyan92]

Hi @maxkatz6

Thank you for your quick response. I want to clarify that I've already thoroughly investigated the available documentation. The sample I mentioned earlier is based on the information provided there. However, I'm seeking a more in-depth explanation of the four points above. If there are any specific samples or references you could point me to, that would be extremely helpful

[maxkatz6]

Control Themes documentation should explain 1 and 2 points pretty well: https://docs.avaloniaui.net/docs/next/basics/user-interface/styling/control-themes

In short, ControlTheme is a base style of the control. That is not matched by the selector, but instead applied by the key (usually, control type is used as a key).
So, it's pretty much expected that with custom ControlTheme you need to provide full styling.
While styles with selectors are applied on top of control themes.

[vardansargsyan92]

Thank you for clarifying the themes. Your explanation was really helpful!