![]() |
VOOZH | about |
dotnet add package Devolutions.AvaloniaTheme.MacOS --version 2026.6.16
NuGet\Install-Package Devolutions.AvaloniaTheme.MacOS -Version 2026.6.16
<PackageReference Include="Devolutions.AvaloniaTheme.MacOS" Version="2026.6.16" />
<PackageVersion Include="Devolutions.AvaloniaTheme.MacOS" Version="2026.6.16" />Directory.Packages.props
<PackageReference Include="Devolutions.AvaloniaTheme.MacOS" />Project file
paket add Devolutions.AvaloniaTheme.MacOS --version 2026.6.16
#r "nuget: Devolutions.AvaloniaTheme.MacOS, 2026.6.16"
#:package Devolutions.AvaloniaTheme.MacOS@2026.6.16
#addin nuget:?package=Devolutions.AvaloniaTheme.MacOS&version=2026.6.16Install as a Cake Addin
#tool nuget:?package=Devolutions.AvaloniaTheme.MacOS&version=2026.6.16Install as a Cake Tool
Custom Avalonia Themes developed by Devolutions
👁 Build Status
👁 NuGet Version
👁 NuGet Downloads
(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.
small improvements & fixes, some code cleanup
SplitButton
CheckBoxListBox Custom control
MultiComboBox Custom control
Install the Devolutions.AvaloniaTheme.MacOS package via NuGet:
Install-Package Devolutions.AvaloniaTheme.MacOS
or .NET
dotnet add package Devolutions.AvaloniaTheme.MacOS
In your App.axaml, replace the existing theme (e.g. <FluentTheme /> or <SimpleTheme />) with the macOS theme:
<Application ...>
<Application.Styles>
<DevolutionsMacOsTheme />
</Application.Styles>
</Application>
Note: Some global Styles will also be loaded by default, you can opt out by setting GlobalStyles to false (<DevolutionsMacOsTheme GlobalStyles="False" />). GlobalStyles are also available as a separate tag <DevolutionsMacOsThemeGlobalStyles /> to cover scenarios where consumers would like to scope them to some control instead of including them globally. This is may be necessary to prevent styles from "bleeding out" in cases where that might be undesirable.
Most of the images below are screenshots from the SampleApp test and demo pages - feel free to check out the code there for more detailed usage examples.
For an always up-to-date visual reference you can also browse the baseline screenshots.
| <h3>AdornerLayer</h3> | |
| ✅ | <h3>AutoCompleteBox</h3> |
| <img src="https://github.com/user-attachments/assets/a4e939c0-6516-499f-b3e7-8c68e8be2770" alt="AutoCompleteBox demo" style="width: 460px; max-width: 100%;"> <br /><br /> ➡️ See also EditableComboBox in our custom controls | |
| ✅ | <h3>Button</h3> |
| <img src="https://github.com/user-attachments/assets/49093553-a8b6-4cbe-b7a5-7c8f6a8ead3b" alt="Buttons demo" style="width: 300px; max-width: 100%;" /> | |
| ✅ | <h3>CalendarDatePicker</h3> <h4>Calendar</h4> <h4>CalendarItem</h4> <h4>CalendarButton</h4> <h4>CalendarDayButton</h4> |
<img alt="CalendarDatePicker" src="https://github.com/user-attachments/assets/27ab5934-2b67-439e-b651-ee96aa173a3e" style="width: 488px; max-width: 100%;" /> <br /> <img alt="CalendarDatePicker" src="https://github.com/user-attachments/assets/86284afe-c84d-4761-9a40-a72146b56db5" style="width: 543px; max-width: 100%;" /> <br /> <img alt="CalendarDatePicker" src="https://github.com/user-attachments/assets/7d65388f-3b8f-4055-ae35-dd71f9047b1d" style="width: 488px; max-width: 100%;" /> <br /> <img alt="CalendarDatePicker" src="https://github.com/user-attachments/assets/07410b9f-79df-43ac-bba5-502216f33f29" style="width: 543px; max-width: 100%;" /> <br /> Note: MinWidth is set to comfortably accommodate short date formats & the corresponding default watermark when HorizontalAlignment is set to anything other than the default (Stretch).<br /><br />If you set SelectedDateFormat="Long" you will have to override MinWidth to the longest expected string length, depending on supported languages. Otherwise the control's width will jump when the date is changed. |
|
| <h3>CaptionButtons</h3> | |
| <h3>Carousel</h3> | |
| ✅ | <h3>CheckBox</h3> |
| <img src="https://github.com/user-attachments/assets/30182450-b339-49d4-9aab-96cef627d0ca" alt="CheckBox demo" style="width: 723px; max-width: 100%;" /> | |
| ✅ | <h3>ComboBox</h3> <h4>ComboBoxItem</h4> |
| <img src="https://github.com/user-attachments/assets/7a8ed69e-1e1c-4218-9b97-591f5b7baaba" alt="ComboBox demo" style="width: 461px; max-width: 100%;" /> | |
| ✅ | <h3>ContextMenu</h3> |
| <img src="https://github.com/user-attachments/assets/72a2c409-da86-4ff9-8bac-2be7c0ef2b7d" alt="ContextMenu demo" style="width: 316px; max-width: 100%;" /> | |
| ✅ | <h3>DataGrid</h3> |
| <img src="https://github.com/user-attachments/assets/2810997d-3bfb-4ba0-9d7e-19f483733fd4" alt="DataGrid demo" style="width: 955px; max-width: 100%;" /> <br />The editable field still has an issue, forcing the row to be slightly higher than the others <br /><br /><strong>Grouped Data</strong><br /><img src="https://github.com/user-attachments/assets/0b1f3dfc-79bc-477a-8418-fda1258c2d1d" alt="Grouped DataGrid demo" style="width: 1047px; max-width: 100%;" /> | |
| <h3>DataValidationErrors</h3> | |
| <h3>DatePicker</h3> | |
| <h3>DateTimePickerShared</h3> | |
| <h3>DropDownButton</h3> | |
| ✅ | <h3>EditableComboBox</h3> |
| Custom control<br /><br /><img alt="EditableComboBox" src="https://github.com/user-attachments/assets/0aa4e16a-461b-4ffd-9420-b180d0c7bb9a" style="width: 431px; max-width: 100%;"/><br /><br /><img alt="EditableComboBox - dark mode" src="https://github.com/user-attachments/assets/eef1d34d-ce7e-4386-bc30-2ad165151f7b" style="width: 431px; max-width: 100%;" /> | |
| <h3>EmbeddableControlRoot</h3> | |
| ✅ | <h3>Expander</h3> |
| <img alt="Expanders" src="https://github.com/user-attachments/assets/106e240f-a2e2-4a7b-a782-f0b159ebef42" style="width: 880px; max-width: 100%;" /> <br /><img alt="Expanders - dark mode" src="https://github.com/user-attachments/assets/bd87abed-256d-46b7-9bf0-3622c64f80de" style="width: 894px; max-width: 100%;" /> <br /><img alt="Expander expanded" src="https://github.com/user-attachments/assets/19992249-9896-43d2-9e52-5caf2562db22" style="width: 880px; max-width: 100%;" /> <br /><img alt="Expander expanded - dark mode" src="https://github.com/user-attachments/assets/910c456d-8971-41f4-91f5-7ecb4d38b46a" style="width: 894px; max-width: 100%;" /> | |
| <h3>FluentControls</h3> | |
| <h3>FlyoutPresenter</h3> | |
| ✅ | <h3>GridSplitter</h3> |
| <img src="https://github.com/user-attachments/assets/df3b0ff0-9f71-4a06-b579-4411949bee1a" alt="GridSplitter" style="width: 513px; max-width: 100%;" /> | |
| <h3>HeaderedContentControl</h3> | |
| <h3>HyperlinkButton</h3> | |
| <h3>ItemsControl</h3> | |
| <h3>Label</h3> | |
| ✅ | <h3>ListBox</h3> <h4>ListBoxItem</h4> |
| <img alt="Basic ListBox" src="https://github.com/user-attachments/assets/3d759f36-7f42-4866-9d48-aded0ee38a0e" style="width: 901px; max-width: 100%;" /><br /><img alt="ListBox demos" src="https://github.com/user-attachments/assets/af7c355b-5cd9-4ab3-9377-12123e687d0c" style="width: 817px; max-width: 100%;" /><br /><img alt="Multi-column ListBox demos" src="https://github.com/user-attachments/assets/54eb0b14-a7be-43cf-a938-babc7259c687" style="width: 972px; max-width: 100%;" /><br /><img alt="Multi-column ListBoxes with scrollbars" src="https://github.com/user-attachments/assets/f190dec6-6aa9-467d-a2e5-358c8f363a47" style="width: 551px; max-width: 100%;" /><br /><img alt="ListBox demos - darkmode" src="https://github.com/user-attachments/assets/697e2b93-f49e-4aa0-8fbe-eb8428e88195" style="width: 973px; max-width: 100%;" /> | |
| <h3>ManagedFileChooser</h3> | |
| ✅ | <h3>Menu</h3> |
<img alt="Main menu" src="https://github.com/user-attachments/assets/d3b70c05-9bdc-4437-ba8f-9e098b7b7123" style="width: 266px; max-width: 100%;" /><br /><br />Classes="MacOS_Theme_MenuLabelBelowIcon" for toolbar-style menus<br /><img alt="Large toolbar" src="https://github.com/user-attachments/assets/791a9d1c-3272-4229-9db4-4bf20399a0d0" style="width: 341px; max-width: 100%;" /><br /><img alt="Small toolbar" src="https://github.com/user-attachments/assets/2f433c00-7965-4ffa-a3c5-1fc5712b2f48" style="width: 155px; max-width: 100%;" /><br /><br />Classes="MacOS_Theme_MenuItemIconOnly" to hide labels completely<br />Classes="MacOS_Theme_MenuOpensAbove" for bottom-placed menus<br /><img alt="Bottom toolbar" src="https://github.com/user-attachments/assets/bfc4a22a-6a12-4197-aef5-cc044ba3e7a4" style="width: 236px; max-width: 100%;" /> |
|
| ✅ | <h3>MenuFlyoutPresenter</h3> |
| <img src="https://github.com/user-attachments/assets/085eca28-d703-44e4-9392-35bb7b0ffc57" alt="MenuFlyout demo" style="width: 629px; max-width: 100%;" /><br /><img src="https://github.com/user-attachments/assets/fccf7dac-6b17-49ad-ad59-c7393f97532b" alt="MenuFlyout demo" style="width: 629px; max-width: 100%;" /> | |
| ✅ | <h3>MenuItem</h3> |
| See Menu, MenuFlyoutPresenter, ContextMenu | |
| <h3>MenuScrollViewer</h3> | |
| <h3>NotificationCard</h3> | |
| ✅ | <h3>NumericUpDown</h3> <h4>ButtonSpinner</h4> |
| <img src="https://github.com/user-attachments/assets/a58375d7-1987-4182-b7f2-03f2bf499193" alt="NumericUpDown demo" style="width: 172px; max-width: 100%;" /> | |
| <h3>OverlayPopupHost</h3> | |
| <h3>PathIcon</h3> | |
| <h3>PopupRoot</h3> | |
| <h3>ProgressBar</h3> | |
| ✅ | <h3>RadioButton</h3> |
| <img alt="RadioButton demos" src="https://github.com/user-attachments/assets/b0097ffc-47ef-4553-bda0-2764f4254d8c" style="width: 313px; max-width: 100%;" /><img alt="RadioButton demos - dark mode" src="https://github.com/user-attachments/assets/4705b961-6c14-4882-aeed-fd9b2fd2a6ce" style="width: 313px; max-width: 100%;" /> | |
| <h3>RefreshContainer</h3> | |
| <h3>RefreshVisualizer</h3> | |
| <h3>RepeatButton</h3> | |
| ✅ | <h3>ScrollViewer</h3> <h4>ScrollBar</h4> |
Default:<br /><img alt="ScrollViewer - default" src="https://github.com/user-attachments/assets/71bbd1ea-c2ec-44b6-a943-6f51dd0a3e65" style="width: 415px; max-width: 100%;" /><br />AllowAutoHide="False":<br /><img alt="ScrollViewer - AllowAutoHide false" src="https://github.com/user-attachments/assets/60116d7d-90a0-49b2-9736-f9d7715e89e8" style="width: 418px; max-width: 100%;" /> <br /><br />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. <br /><br />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" |
|
| <h3>SelectableTextBlock</h3> | |
| ✅ | <h3>Separator</h3> |
| See Menu, MenuFlyoutPresenter, ContextMenu | |
| <h3>Slider</h3> | |
| <h3>SplitButton</h3> | |
| <h3>SplitView</h3> | |
| ✅ | <h3>TabControl</h3> <h4>TabItem<h4> |
| <img src="https://github.com/user-attachments/assets/4f88ce2c-59f9-4f85-b2db-a47fe0301472" alt="TabControl demo" style="width: 515px; max-width: 100%;" /> <br />Vertical tabs may still need some work | |
| <h3>TabStrip</h3> | |
| <h3>TabStripItem</h3> | |
| ✅ | <h3>TagInput</h3> |
| Custom control<br /><br /><img alt="TagInput" src="https://github.com/user-attachments/assets/89e264d1-fa20-4273-bb75-eb8e8a6806fc" style="width: 522px; max-width: 100%;"/><br /><br /><img alt="TagInput - dark mode" src="https://github.com/user-attachments/assets/febebb74-0b6e-4cd6-beaf-0d5b887e0939" style="width: 522px; max-width: 100%;" /> | |
| ✅ | <h3>TextBox</h3> |
| <img src="https://github.com/user-attachments/assets/47930d85-ec80-44b4-802d-6fe72d81bee4" alt="TextBoxdemo" style="width: 343px; max-width: 100%;" /> <br />There appears to be no easy way for styling the caret thickness and margin | |
| <h3>TextSelectionHandle</h3> | |
| <h3>ThemeVariantScope</h3> | |
| <h3>TimePicker</h3> | |
| <h3>TitleBar</h3> | |
| <h3>ToggleButton</h3> | |
| (✅) | <h3>ToggleSwitch</h3> |
| <img src="https://github.com/user-attachments/assets/3fb54744-283e-4848-9da8-b6f4bd9923c1" alt="ToggleSwitch" style="width: 382px; max-width: 100%;" /><img src="https://github.com/user-attachments/assets/e9428a6d-ac3d-4e60-a770-e1365cbdb3d3" alt="ToggleSwitch dark mode" style="width: 382px; max-width: 100%;" /> | |
| ✅ | <h3>ToolTip</h3> |
| <img src="https://github.com/user-attachments/assets/92d9e28e-c955-4643-9d50-ee785f19bbb9" alt="ToolTipdemo - light" style="width: 300px; max-width: 100%;" /><br /><img src="https://github.com/user-attachments/assets/1de29b7a-25e8-4f41-985d-fb2e4f687c1b" alt="ToolTip demo - dark" style="width: 300px; max-width: 100%;" /> | |
| <h3>TransitioningContentControl</h3> | |
| ✅ | <h3>TreeView</h3> <h4>TreeViewItem<h4> |
<img src="https://github.com/user-attachments/assets/67a61905-e71e-4799-92c7-018c9342c7ed" alt="TabControl demo" style="width: 715px; max-width: 100%;" /> <br />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)) |
|
| ✅ | <h3>Window</h3> |
| Controls inherit basic MacOS-specific Fore-/Background & Font styling from Window (or EmbeddableControlRoot) | |
| <h3>WindowNotificationManager</h3> |
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | net9.0 net9.0 is compatible. net9.0-android net9.0-android was computed. net9.0-browser net9.0-browser was computed. net9.0-ios net9.0-ios was computed. net9.0-maccatalyst net9.0-maccatalyst was computed. net9.0-macos net9.0-macos was computed. net9.0-tvos net9.0-tvos was computed. net9.0-windows net9.0-windows was computed. net10.0 net10.0 is compatible. net10.0-android net10.0-android was computed. net10.0-browser net10.0-browser was computed. net10.0-ios net10.0-ios was computed. net10.0-maccatalyst net10.0-maccatalyst was computed. net10.0-macos net10.0-macos was computed. net10.0-tvos net10.0-tvos was computed. net10.0-windows net10.0-windows was computed. |
This package is not used by any NuGet packages.
Showing the top 1 popular GitHub repositories that depend on Devolutions.AvaloniaTheme.MacOS:
| Repository | Stars |
|---|---|
|
Devolutions/UniGetUI
UniGetUI: The Graphical Interface for your package managers. Could be terribly described as a package manager manager to manage your package managers
|
| Version | Downloads | Last Updated |
|---|---|---|
| 2026.6.17-avalonia12 | 39 | 6/17/2026 |
| 2026.6.16 | 56 | 6/16/2026 |
| 2026.6.10 | 137 | 6/10/2026 |
| 2026.6.9 | 160 | 6/9/2026 |
| 2026.6.2 | 146 | 6/2/2026 |
| 2026.5.14 | 212 | 5/14/2026 |
| 2026.5.11 | 151 | 5/11/2026 |
| 2026.5.8 | 171 | 5/8/2026 |
| 2026.4.30 | 173 | 4/30/2026 |
| 2026.4.23 | 196 | 4/23/2026 |
| 2026.4.20 | 148 | 4/20/2026 |
| 2026.4.17 | 146 | 4/17/2026 |
| 2026.4.16 | 129 | 4/16/2026 |
| 2026.4.15.1 | 122 | 4/15/2026 |
| 2026.4.8 | 194 | 4/8/2026 |
| 2026.3.24.2 | 269 | 3/24/2026 |
| 2026.3.24 | 159 | 3/24/2026 |
| 2026.3.13 | 1,890 | 3/13/2026 |
| 2026.3.11.2 | 255 | 3/11/2026 |
| 2026.3.11 | 120 | 3/11/2026 |
See https://github.com/Devolutions/avalonia-extensions/blob/master/src/Devolutions.AvaloniaTheme.MacOS/CHANGELOG.md
BREAKING: 2026.01.08 - Changes to how controls respond to custom height settings