Theming

Default Light and Default Dark, the 36 color themes from GPUI Kit, the color tokens, the font, and the sizes and variants chosen with style classes.

#Color themes

UIKitTheme comes in GPUI Kit's Default Light and Default Dark, which are Avalonia's Light and Dark theme variants, and in the 36 color themes GPUI Kit bundles: Aurora, Ayu, Catppuccin, Gruvbox, Solarized, Tokyo Night and the rest. Choose one with Avalonia's RequestedThemeVariant, on the application, a window or a ThemeVariantScope:

<Application RequestedThemeVariant="Dark">

The bundled themes are the theme variants in UIKitThemeVariants. Each is a light or a dark theme and inherits Avalonia's Light or Dark, so what other themes such as FluentTheme define for that mode still applies:

<Application xmlns:uikit="using:AvaloniaUIKit"
             RequestedThemeVariant="{x:Static uikit:UIKitThemeVariants.TokyoNight}">

<ThemeVariantScope RequestedThemeVariant="{x:Static uikit:UIKitThemeVariants.AuroraLight}">
  <Button Classes="primary" Content="Aurora" />
</ThemeVariantScope>

In code, UIKitThemeVariants.All lists them, UIKitThemeVariants.Find looks one up by its GPUI Kit name (Default Light and Default Dark too), and UIKitThemeVariants.IsDark tells whether a variant is a dark one:

Application.Current!.RequestedThemeVariant =
    UIKitThemeVariants.Find("Catppuccin Mocha") ?? ThemeVariant.Dark;

Press T to try them on this site: the site and its live demos take the theme you pick.

Aurora Light paints buttons, the primary fill, switches, the slider's thumb, progress bars and scrollbar thumbs with gradients, as GPUI Kit does. The other themes are solid colors.

#Color tokens

Every color of the theme is a resource with a UIKit. prefix: the base tokens (UIKit.Background, UIKit.Foreground, UIKit.Border, UIKit.Primary, UIKit.PrimaryForeground, UIKit.Secondary, UIKit.Muted, UIKit.MutedForeground, UIKit.Accent, UIKit.Danger, UIKit.Warning, UIKit.Success, UIKit.Info, UIKit.Link, UIKit.Popover, UIKit.FocusRing, the palette colors UIKit.Blue, UIKit.Green and so on) and the colors the components derive from them for their states (UIKit.Button.Primary.Hover.Background, for example). A base token is a solid brush; the Color is the same key with a .Color suffix. Use them with DynamicResource so they follow the theme variant:

<Border Background="{DynamicResource UIKit.Muted}"
        BorderBrush="{DynamicResource UIKit.Border}">
  <TextBlock Foreground="{DynamicResource UIKit.MutedForeground}" Text="Muted" />
</Border>

The tokens a theme may give as a gradient also have a .Fill brush, which is the gradient where the theme has one (UIKit.Primary.Fill is a gradient in Aurora Light, while UIKit.Primary is its first color). Use .Fill for a background that should look like the theme's primary button or switch; the derived background colors are already gradients where the theme's are.

The tokens are generated, so they are not meant to be edited by hand. An application can still override one in Application.Resources, which Avalonia checks before the theme; the derived colors are resources of their own and do not follow the override.

#Font

The theme uses the platform's UI font: UIKit.FontFamily is $Default. The demos on this site use Inter; to match them, add Inter to your app and override the resource:

<Application.Resources>
  <FontFamily x:Key="UIKit.FontFamily">avares://MyApp/Assets/Fonts#Inter</FontFamily>
</Application.Resources>

The other metrics are resources too: UIKit.FontSize (16) with UIKit.FontSize.Xs, .Sm, .Base and .Lg (12, 14, 16, 18), UIKit.Radius (6) and UIKit.RadiusLg (8), and the springs UIKit.Spring.Control and UIKit.Spring.Move that drive the motion.

#Sizes

The components come in four sizes. Pick one with a style class; the default is medium.

<Button Classes="xsmall" Content="XSmall" />
<Button Classes="small" Content="Small" />
<Button Content="Medium" />
<Button Classes="large" Content="Large" />

Button, SplitButton, DropDownButton, ToggleButton, CheckBox, RadioButton, ToggleSwitch, TextBox, NumericUpDown, ComboBox, AutoCompleteBox, ProgressBar, PathIcon, TabStrip and the new controls take xsmall, small and large.

#Variants

Variants are style classes as well, and the classes combine freely:

<Button Classes="primary" Content="Primary" />
<Button Classes="danger outline small" Content="Delete" />
<Button Classes="ghost icon-only">
  <PathIcon Data="{StaticResource UIKit.Icon.Copy}" />
</Button>

A class the theme does not know is ignored, so a typo gives the default look rather than an error.

#Named themes

A few components are another look of an Avalonia control, chosen with Theme:

<ProgressBar Theme="{StaticResource UIKitSpinner}" IsIndeterminate="True" />
<ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="60" />
<Expander Theme="{StaticResource UIKitCollapsible}" Header="Details" />
<TableView Theme="{StaticResource UIKitTable}" />