Skip to main content

​
Themes

Avalonia provides a flexible theming system with built-in themes and support for custom themes. The most commonly used theme is the Fluent Design theme.

​
FluentTheme

The Fluent Design theme provides a modern, Microsoft Fluent Design-inspired appearance.

​
Namespace

Avalonia.Themes.Fluent

​
Inheritance

Object → AvaloniaObject → Styles → FluentTheme

​
Constructor

​
FluentTheme()
constructor
Creates a new instance of the FluentTheme.

​
Properties

​
DensityStyle
DensityStyle
Gets or sets the density style of the theme.Values:
  • Normal - Standard spacing and sizing
  • Compact - Reduced spacing for higher information density
​
Palettes
IDictionary<ThemeVariant, ColorPaletteResources>
Gets the color palettes for different theme variants (Light, Dark, etc.).

​
Usage in Application

​
Basic FluentTheme Setup

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MyApp.App">
    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>

​
With Compact Density

<Application.Styles>
    <FluentTheme DensityStyle="Compact" />
</Application.Styles>

​
Requesting Theme Variant

<Application xmlns="https://github.com/avaloniaui"
             RequestedThemeVariant="Dark">
    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>

​
ThemeVariant

Theme variants allow switching between light, dark, and custom themes.

​
Built-in Theme Variants

​
ThemeVariant.Light
ThemeVariant
The light theme variant (light backgrounds, dark text).
​
ThemeVariant.Dark
ThemeVariant
The dark theme variant (dark backgrounds, light text).
​
ThemeVariant.Default
ThemeVariant
The default theme variant (follows system preference).

​
Setting Theme Variant

​
Application-Level

<Application xmlns="https://github.com/avaloniaui"
             RequestedThemeVariant="Dark">
    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>

​
Window-Level

<Window xmlns="https://github.com/avaloniaui"
        RequestedThemeVariant="Light">
    <!-- Window content -->
</Window>

​
Code-Behind

using Avalonia;
using Avalonia.Styling;

// Set application theme
Application.Current.RequestedThemeVariant = ThemeVariant.Dark;

// Set window theme
window.RequestedThemeVariant = ThemeVariant.Light;

// Follow system theme
Application.Current.RequestedThemeVariant = ThemeVariant.Default;

​
Dynamic Theme Switching

public class MainViewModel
{
    public void ToggleTheme()
    {
        var app = Application.Current;
        if (app is not null)
        {
            var currentTheme = app.ActualThemeVariant;
            app.RequestedThemeVariant = currentTheme == ThemeVariant.Dark 
                ? ThemeVariant.Light 
                : ThemeVariant.Dark;
        }
    }
}

​
Custom Theme Variants

​
Creating a Custom Theme Variant

using Avalonia.Styling;

public static class CustomThemes
{
    public static ThemeVariant HighContrast { get; } = new ThemeVariant(
        "HighContrast", 
        ThemeVariant.Dark
    );
}

​
Using Custom Theme Resources

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="PrimaryBrush" Color="#0078D4" />
            </ResourceDictionary>
            
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="PrimaryBrush" Color="#60CDFF" />
            </ResourceDictionary>
            
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="PrimaryBrush" Color="#FFFF00" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

​
SimpleTheme

A lightweight alternative to FluentTheme with minimal styling. 
<Application.Styles>
    <SimpleTheme />
</Application.Styles>

​
Custom Themes

​
Creating a Custom Theme

Create a Styles file (e.g., MyTheme.axaml): 
<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Styles.Resources>
        <!-- Define theme resources -->
        <Color x:Key="ThemeAccentColor">#6200EE</Color>
        <SolidColorBrush x:Key="ThemeAccentBrush" Color="{StaticResource ThemeAccentColor}" />
    </Styles.Resources>
    
    <!-- Style all buttons -->
    <Style Selector="Button">
        <Setter Property="Background" Value="{StaticResource ThemeAccentBrush}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Padding" Value="12,6" />
        <Setter Property="CornerRadius" Value="4" />
    </Style>
    
    <!-- More control styles... -->
</Styles>
Include in your application: 
<Application.Styles>
    <StyleInclude Source="/Themes/MyTheme.axaml" />
</Application.Styles>

​
Theme-Aware Controls

​
Responding to Theme Changes

using Avalonia.Controls;
using Avalonia.Styling;

public class MyControl : UserControl, IStyleable
{
    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
    {
        base.OnAttachedToVisualTree(e);
        UpdateForTheme();
    }
    
    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
    {
        base.OnPropertyChanged(change);
        
        if (change.Property == RequestedThemeVariantProperty ||
            change.Property == ActualThemeVariantProperty)
        {
            UpdateForTheme();
        }
    }
    
    private void UpdateForTheme()
    {
        var isDark = ActualThemeVariant == ThemeVariant.Dark;
        // Update control appearance based on theme
    }
}

​
Accessing Theme Resources

​
In XAML

<Button Background="{DynamicResource SystemAccentColor}"
        Foreground="{DynamicResource SystemAccentColorLight1}" />
Use DynamicResource instead of StaticResource for theme-aware resources that can change at runtime.

​
In Code

if (Application.Current.TryGetResource("SystemAccentColor", 
    ActualThemeVariant, out var accentColor))
{
    if (accentColor is Color color)
    {
        // Use the color
    }
}

​
Best Practices

Define resources for both theme variants to ensure your app looks good in any theme.
<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">...</ResourceDictionary>
    <ResourceDictionary x:Key="Dark">...</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
Static resources won’t update when the theme changes.
<!-- Good -->
<Button Background="{DynamicResource ButtonBackground}" />

<!-- Bad (won't update on theme change) -->
<Button Background="{StaticResource ButtonBackground}" />
Always test your UI in both light and dark modes to ensure good contrast and readability.

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us