Midnight Softworks

Theming Gudrun

Everything you see in Gudrun — colors, the treemap palette, fonts, paddings, even the treemap's tile geometry — comes from a theme file. Four themes ship built in (Dark, Light, Solarized Dark, Solarized Light), and you can add your own: a theme is a single declarative XML file, no code, applied instantly from Settings with no restart.

Where theme files live

Any .axaml file in that folder appears in the Settings theme picker — or skip the folder hunt entirely: the Import… button next to the theme picker validates a theme file, copies it there for you, and applies it. The file name (minus extension) is the theme's identity — it's what Gudrun remembers as your choice across restarts. Naming a file the same as a bundled theme overrides that bundled theme, so you can restyle the defaults without losing their slot in the picker.

A theme that fails to load never breaks anything: the current theme stays applied and the picker shows the parse error so you can fix the file.

The format

A theme is a <ResourceDictionary> containing typed, keyed values. Exactly these element types are allowed:

Every key in the template below is required — applying a theme replaces the whole set, so a file with missing keys leaves parts of the UI unstyled. Start from the template and change values, not structure. The single exception is DisplayName, which is optional metadata (see the key reference).

Complete template

This is the built-in Dark theme, key for key, plus the optional DisplayName at the top — copy it into MyTheme.axaml and make it yours:

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Optional: shown verbatim in the theme picker. Without it the file
         name is used, with CamelCase split ("OceanDeep" → "Ocean Deep") -->
    <x:String x:Key="DisplayName">My Theme</x:String>

    <!-- Backgrounds -->
    <Color x:Key="ColorBackgroundPrimary">#1a1a1a</Color>
    <Color x:Key="ColorBackgroundPanel">#252525</Color>
    <Color x:Key="ColorBackgroundToolbar">#1e1e1e</Color>
    <Color x:Key="ColorBackgroundStatus">#1a1a1a</Color>
    <Color x:Key="ColorSplitter">#181818</Color>

    <!-- Text -->
    <Color x:Key="ColorTextPrimary">#dddddd</Color>
    <Color x:Key="ColorTextMuted">#888888</Color>
    <Color x:Key="ColorTextWarning">#e0a050</Color>

    <!-- Accents -->
    <Color x:Key="ColorAccent">#5a7fa3</Color>
    <Color x:Key="ColorBorderSubtle">#333333</Color>

    <!-- Brushes (controls bind brushes; reference the colors above) -->
    <SolidColorBrush x:Key="BrushBackgroundPrimary"  Color="{StaticResource ColorBackgroundPrimary}"/>
    <SolidColorBrush x:Key="BrushBackgroundPanel"    Color="{StaticResource ColorBackgroundPanel}"/>
    <SolidColorBrush x:Key="BrushBackgroundToolbar"  Color="{StaticResource ColorBackgroundToolbar}"/>
    <SolidColorBrush x:Key="BrushBackgroundStatus"   Color="{StaticResource ColorBackgroundStatus}"/>
    <SolidColorBrush x:Key="BrushSplitter"           Color="{StaticResource ColorSplitter}"/>
    <SolidColorBrush x:Key="BrushTextPrimary"        Color="{StaticResource ColorTextPrimary}"/>
    <SolidColorBrush x:Key="BrushTextMuted"          Color="{StaticResource ColorTextMuted}"/>
    <SolidColorBrush x:Key="BrushTextWarning"        Color="{StaticResource ColorTextWarning}"/>
    <SolidColorBrush x:Key="BrushAccent"             Color="{StaticResource ColorAccent}"/>

    <!-- Treemap depth bands: tiles cycle through these 8 colors by depth -->
    <Color x:Key="ColorTreemapPalette00">#7a3145</Color>
    <Color x:Key="ColorTreemapPalette01">#8f6336</Color>
    <Color x:Key="ColorTreemapPalette02">#4a7a45</Color>
    <Color x:Key="ColorTreemapPalette03">#224a5d</Color>
    <Color x:Key="ColorTreemapPalette04">#54406e</Color>
    <Color x:Key="ColorTreemapPalette05">#6e3839</Color>
    <Color x:Key="ColorTreemapPalette06">#5d5e3a</Color>
    <Color x:Key="ColorTreemapPalette07">#3f3d56</Color>

    <!-- Treemap borders -->
    <SolidColorBrush x:Key="BrushTreemapBorder"      Color="#0a0a0a"/>
    <SolidColorBrush x:Key="BrushTreemapHoverBorder" Color="#3a3540"/>

    <!-- Typography -->
    <FontFamily x:Key="FontUI">fonts:Inter#Inter</FontFamily>
    <FontFamily x:Key="FontMono">Cascadia Mono,Consolas,DejaVu Sans Mono,monospace</FontFamily>
    <x:Double x:Key="FontSizeSmall">11</x:Double>
    <x:Double x:Key="FontSizeMedium">14</x:Double>
    <x:Double x:Key="FontSizeLarge">16</x:Double>

    <!-- Density & layout -->
    <Thickness x:Key="DensityPadding">8</Thickness>
    <Thickness x:Key="DensityPaddingButton">10,4</Thickness>
    <Thickness x:Key="DensityPaddingButtonSmall">8,4</Thickness>
    <Thickness x:Key="DensityPaddingDialogButton">14,6</Thickness>
    <x:Double x:Key="DensityRowMinHeight">32</x:Double>
    <CornerRadius x:Key="CornerRadius">4</CornerRadius>
    <Thickness x:Key="BorderWidth">1</Thickness>
    <x:Double x:Key="SplitterThickness">4</x:Double>
    <x:Double x:Key="TreemapInnerPadding">4</x:Double>

    <!-- "Light" or "Dark": aligns the built-in control styles (scrollbars,
         combo boxes, checkboxes) with your palette -->
    <x:String x:Key="ThemeVariant">Dark</x:String>
</ResourceDictionary>

Key reference

Application chrome

Treemap

Typography

Density & layout

Metadata

Tips