CCSWE.Avalonia.Material 12.0.26

CCSWE.Avalonia.Material

A standalone Material 3 theme for Avalonia 12 — a Dark/Light color system, the M3 type scale, motion, embedded brand fonts, and M3 control themes for the full control set. Depends only on Avalonia core — no FluentTheme/SimpleTheme base required.

Install

dotnet add package CCSWE.Avalonia.Material

Versioning: the major version tracks the supported Avalonia major — 12.x targets Avalonia 12.x. Pick the major matching your Avalonia version; minor/patch are this library's own features and fixes.

Wire it up

Add one element to your App.axaml:

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:theme="using:CCSWE.Avalonia.Material"
             x:Class="YourApp.App"
             RequestedThemeVariant="Dark"> 

  <Application.Styles>
    <theme:MaterialTheme />
  </Application.Styles>
</Application>

MaterialTheme is standalone — it supplies the whole control surface itself and depends only on Avalonia core. No <FluentTheme/> (or other base theme) is required.

Use it

<StackPanel Spacing="12">
  <TextBlock Classes="HeadlineSmall" Text="Devices" />
  <TextBox Classes="Outlined" PlaceholderText="IP address" />
  <Button Classes="Filled" Content="Connect" />
  <Button Classes="Outlined" Content="Pair new device" />
  <CheckBox Content="Connect automatically" />
  <ToggleSwitch Content="Wireless debugging" />
</StackPanel>

• Buttons: Filled, FilledTonal, Elevated, Outlined, Text, Icon.
• Floating action button: the <theme:FloatingActionButton> control — Size (Small / Regular / Large) and Color (Primary / Secondary / Tertiary / Surface) M3 mappings, with Command / Click inherited from Button.
• Text fields: Outlined, Filled.
• Cards: the <theme:Card> control for interactive cards (Elevated / Filled / Outlined, M3 hover/press state layers, Command / Click; clickable when a Command is set or IsClickable="True"), or a plain Border with Card + Elevated / Filled / Outlined for static surfaces.
• Divider: the <theme:Divider> control — a thin M3 rule, with an optional Header that turns it into a leading section header (label on the rule's axis, hairline filling to its right); omit it for a plain full-width rule.
• Circular progress: the <theme:CircularProgressIndicator> control — determinate (Value / Minimum / Maximum) or an IsIndeterminate="True" spinner; the ring counterpart to the linear ProgressBar.
• Default-themed (no class): ToggleButton, AutoCompleteBox, NumericUpDown, CheckBox, RadioButton, ToggleSwitch, ListBox, TreeView, ComboBox, Menu, Expander, Slider, ProgressBar, TabControl, TabStrip.
• Type scale: DisplayLarge … LabelSmall as TextBlock classes.
• Color roles: {DynamicResource Primary} (brush) / {DynamicResource PrimaryColor} (color). Use DynamicResource for role brushes so they re-resolve when the theme variant flips.
• Icons: Google Material Symbols (Outlined) ship as StreamGeometry resources keyed Material_Icon* (e.g. Material_IconClose). Reference any via <PathIcon Data="{DynamicResource Material_IconMenu}" />, or override one for your app by redefining the same key downstream.

Switch theme variant at runtime

Application.Current!.RequestedThemeVariant =
    isLight ? ThemeVariant.Light : ThemeVariant.Dark;

License

MIT. Bundles DM Sans and Plus Jakarta Sans under the SIL Open Font License 1.1; their OFL.txt files ship in the package under THIRD-PARTY-NOTICES/.

Source, docs, and the control gallery: https://github.com/CCSWE-Avalonia/CCSWE.Avalonia.Material