Skip to content

Theming System

Avalonia makes a strict difference between Styles (rules) and Resources (variables).

Resources (Theme Dictionaries)

Files like ThemeDictionaries.axaml contain purely Resources.

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!-- These can be swapped out dynamically later -->
    <SolidColorBrush x:Key="AppBackground">#212226</SolidColorBrush>
    <SolidColorBrush x:Key="TextBase">#D4D4D4</SolidColorBrush>
    <SolidColorBrush x:Key="TextMuted">#888888</SolidColorBrush>

</ResourceDictionary>

Styles (Dynamic Rules)

Files like DynamicResource.axaml are only for Styles.

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

    <Style Selector="TextBlock.StatusText">
        <!-- We use DynamicResource so it updates if the user changes the theme -->
        <Setter Property="Foreground" Value="{DynamicResource TextFaint}"/>
        <Setter Property="FontSize" Value="12"/>
    </Style>

</Styles>

Global Injection (App.axaml)

Then they can be imported globally in App.axaml (making them available on every page and component).

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

    <!-- Load Resources -->
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://Stuck.Prototype/Styles/ThemeDictionaries.axaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

    <!-- Load Styles -->
    <Application.Styles>
        <FluentTheme />
        <StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
        <StyleInclude Source="avares://Stuck.Prototype/Styles/DynamicResource.axaml"/>
    </Application.Styles>
</Application>