主题设置

Default Light 与 Default Dark、GPUI Kit 的 36 套配色主题、颜色令牌、字体，以及通过样式类选择的尺寸与变体。

#配色主题

UIKitTheme 提供 GPUI Kit 的 Default Light 与 Default Dark（即 Avalonia 的 Light 与 Dark 主题变体），以及 GPUI Kit 同捆的 36 套配色主题：Aurora、Ayu、Catppuccin、Gruvbox、Solarized、Tokyo Night 等。通过 Avalonia 的 RequestedThemeVariant 在应用、窗口或 ThemeVariantScope 上选择：

<Application RequestedThemeVariant="Dark">

同捆主题都是 UIKitThemeVariants 中的主题变体。每套要么是浅色，要么是深色，并继承 Avalonia 的 Light 或 Dark，因此其他主题（如 FluentTheme）为该模式定义的样式仍然生效：

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

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

在代码中，UIKitThemeVariants.All 列出所有主题，UIKitThemeVariants.Find 按 GPUI Kit 名称查找（也包括 Default Light 和 Default Dark），UIKitThemeVariants.IsDark 判断一个变体是否为深色：

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

按 T 可在本站试用：站点及其实时演示都会应用你选择的主题。

与 GPUI Kit 一致，Aurora Light 会用渐变为按钮、主色填充、开关、滑块拇指、进度条和滚动条拇指上色。其他主题使用纯色。

#颜色令牌

主题中的每种颜色都是带 UIKit. 前缀的资源：基础令牌（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，以及调色板颜色 UIKit.Blue、UIKit.Green 等），还有组件为各种状态从基础令牌推导出的颜色（例如 UIKit.Button.Primary.Hover.Background）。基础令牌是纯色画刷；加上 .Color 后缀的同一个键则是它的 Color。请配合 DynamicResource 使用，以便跟随主题变体：

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

主题可能以渐变呈现的令牌还带有 .Fill 画刷，在主题提供渐变时即为该渐变（在 Aurora Light 中 UIKit.Primary.Fill 是渐变，而 UIKit.Primary 是它的第一种颜色）。若某处背景应看起来像主题的主色按钮或开关，请使用 .Fill；主题中的派生背景色本身已是渐变的地方，派生色也同样是渐变。

这些令牌由生成器生成，不应手工编辑。应用仍可在 Application.Resources 中覆盖某个令牌，Avalonia 会先检查它，再检查主题；派生色是独立资源，不会跟随该覆盖。

#字体

主题使用平台的 UI 字体：UIKit.FontFamily 为 $Default。本站的演示使用 Inter；若要与之保持一致，请将 Inter 加入应用并覆盖该资源：

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

其他度量值同样是资源：UIKit.FontSize（16）及 UIKit.FontSize.Xs、.Sm、.Base、.Lg（12、14、16、18），UIKit.Radius（6）与 UIKit.RadiusLg（8），以及驱动动效的弹簧 UIKit.Spring.Control 和 UIKit.Spring.Move。

#尺寸

组件提供四种尺寸。通过样式类选择，默认为 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 以及新控件都支持 xsmall、small 和 large。

#变体

变体同样是样式类，并且可以自由组合：

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

主题不认识的样式类会被忽略，因此拼写错误只会得到默认外观，而不会报错。

#命名主题

少数控件是 Avalonia 控件的另一种外观，通过 Theme 选择：

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