avalonia-themes

Custom Avalonia Themes developed by Devolutions

MacOS Theme [Work in Progress]

(Inspired by @MikeCodesDotNET's earlier draft)

This theme is currently based on Avalonia.Themes.Fluent, both as a fallback for any controls not covered yet and as starting point for our (somewhat simplified) style definitions targeting AppKit macOS look.

While we are prioritizing controls for Devolutions Remote Desktop Manager initially, the goal is to create a theme that helps all of the Avalonia community to bring a native look to their macOS apps.

• Installation
• Styled Controls
  • ✅ Available in the current build
    • Button
    • CheckBox
    • ComboBox
      • ComboBoxItem
    • ContextMenu
    • DataGrid
    • GridSplitter
    • Menu
    • MenuFlyoutPresenter
    • MenuItem
    • ScrollViewer
      • ScrollBar
    • Separator
    • TabControl
      • TabItem
    • TextBox
    • TreeView
      • TreeViewItem
    • Dark mode support
  • 🚧 In progress
    • Inactive window behaviour
  • 🔮 Next on the road map ...
    • ToolTip

Installation

Install the MacOS.Avalonia.Theme package via NuGet:

Install-Package MacOS.Avalonia.Theme

or .NET

dotnet add package MacOS.Avalonia.Theme

In your App.axaml, replace the existing theme (e.g. <FluentTheme /> or <SimpleTheme />) with the macOS theme:

<Application ...>
  <Application.Styles>
     <StyleInclude Source="avares://MacOS.Avalonia.Theme/MacOSTheme.axaml" />
  </Application.Styles>
</Application>

Styled Controls

		Notes
	AdornerLayer
	AutoCompleteBox
✅	Button
	ButtonSpinner
	Calendar
	CalendarButton
	CalendarDatePicker
	CalendarDayButton
	CalendarItem
	CaptionButtons
	Carousel
✅	CheckBox
✅	ComboBox
	ComboBoxItem
✅	ContextMenu
✅	DataGrid
		The editable field still has an issue, forcing the row to be slightly higher than the others
	DataValidationErrors
	DatePicker
	DateTimePickerShared
	DropDownButton
	EmbeddableControlRoot
	Expander
	FluentControls
	FlyoutPresenter
✅	GridSplitter
	HeaderedContentControl
	HyperlinkButton
	ItemsControl
	Label
	ListBox
	ListBoxItem
	ManagedFileChooser
✅	Menu
		Use: Classes="MacOS_Theme_MenuOpensAbove" for bottom-placed menus Classes="MacOS_Theme_MenuLabelBelowIcon" for toolbar-style menus Classes="MacOS_Theme_MenuItemIconOnly" to hide labels completely
✅	MenuFlyoutPresenter
✅	MenuItem
	See Menu, MenuFlyoutPresenter, ContextMenu
	MenuScrollViewer
	NotificationCard
	NumericUpDown
	OverlayPopupHost
	PathIcon
	PopupRoot
	ProgressBar
	RadioButton
	RefreshContainer
	RefreshVisualizer
	RepeatButton
✅	ScrollViewer ScrollBar
	Default: AllowAutoHide="False":	Note that even with AllowAutoHide="True" the scrollbars won't completely hide. This is intentional, since scrolling events will not trigger a 'show' (only moving the pointer directly over the track area will) - so completely hiding would be confusing. Mousing over one of the track areas will make the thumb bar grow wider and darker and the track appears. To suppress this behaviour (e.g. on images) use Classes="MacOS_TransparentTrack"
	SelectableTextBlock
✅	Separator
	See Menu, MenuFlyoutPresenter, ContextMenu
	Slider
	SplitButton
	SplitView
✅	TabControl TabItem
		Vertical tabs may still need some work
	TabStrip
	TabStripItem
✅	TextBox
		There appears to be no easy way for styling the caret thickness and margin
	TextSelectionHandle
	ThemeVariantScope
	TimePicker
	TitleBar
	ToggleButton
	ToggleSwitch
	ToolTip
	TransitioningContentControl
✅	TreeView TreeViewItem
		Use Classes="MacOS_Theme_AlternatingRowColor" to achieve striped background. (Cannot currently be rendered with rounded corners & breaks when default TreeViewItem height is altered (see comment in ThemeResources.axaml))
	Window
	WindowNotificationManager