Devolutions.AvaloniaTheme.MacOS
2025.7.28
Prefix Reserved
See the version list below for details.
dotnet add package Devolutions.AvaloniaTheme.MacOS --version 2025.7.28
NuGet\Install-Package Devolutions.AvaloniaTheme.MacOS -Version 2025.7.28
<PackageReference Include="Devolutions.AvaloniaTheme.MacOS" Version="2025.7.28" />
<PackageVersion Include="Devolutions.AvaloniaTheme.MacOS" Version="2025.7.28" />
<PackageReference Include="Devolutions.AvaloniaTheme.MacOS" />
paket add Devolutions.AvaloniaTheme.MacOS --version 2025.7.28
#r "nuget: Devolutions.AvaloniaTheme.MacOS, 2025.7.28"
#:package Devolutions.AvaloniaTheme.MacOS@2025.7.28
#addin nuget:?package=Devolutions.AvaloniaTheme.MacOS&version=2025.7.28
#tool nuget:?package=Devolutions.AvaloniaTheme.MacOS&version=2025.7.28
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
- AutoCompleteBox
- Button
- ButtonSpinner
- Calendar
- CheckBox
- ComboBox
- ContextMenu
- DataGrid
- GridSplitter
- Menu
- MenuFlyoutPresenter
- MenuItem
- NumericUpDown
- ScrollViewer
- Separator
- TabControl
- TextBox
- ToolTip
- TreeView
- Window
- Dark mode support
- Limited inactive window behaviour (Accent colours switch to subdued look)
- 🚧 In progress ...
- small improvements & fixes, some code cleanup
- SplitButton
- EditableComboBox Custom control
- 🔮 Next on the road map ...
- RadioButton
- DropDownButton
- ✅ Available in the current build
Installation
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>
Styled Controls
<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 | |
<h3>EmbeddableControlRoot</h3> | |
<h3>Expander</h3> | |
<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> | |
<h3>ListBoxItem</h3> | |
<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> | |
<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>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> | |
✅ | <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 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net9.0
- Avalonia (>= 11.2.0)
- Avalonia.Controls.DataGrid (>= 11.2.0)
- Avalonia.Svg.Skia (>= 11.2.0)
- Avalonia.Themes.Fluent (>= 11.2.0)
- Devolutions.AvaloniaControls (>= 2025.7.15)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last Updated |
---|---|---|
2025.10.7 | 153 | 10/7/2025 |
2025.10.6 | 171 | 10/6/2025 |
2025.9.10 | 185 | 9/10/2025 |
2025.9.9 | 163 | 9/9/2025 |
2025.9.4 | 184 | 9/4/2025 |
2025.8.27.2 | 428 | 8/27/2025 |
2025.8.27 | 222 | 8/27/2025 |
2025.7.28 | 268 | 7/28/2025 |
2025.7.22 | 586 | 7/22/2025 |
2025.7.15 | 259 | 7/15/2025 |
2025.7.14 | 172 | 7/14/2025 |
2025.6.27 | 275 | 6/27/2025 |
2025.6.19 | 284 | 6/19/2025 |
2025.6.12 | 401 | 6/12/2025 |
2025.6.10 | 339 | 6/10/2025 |
2025.6.9.2 | 292 | 6/9/2025 |
2025.6.9 | 301 | 6/9/2025 |
2025.6.5 | 241 | 6/5/2025 |
2025.5.28 | 253 | 5/28/2025 |
2025.5.20 | 181 | 5/20/2025 |
2025.5.2 | 478 | 5/2/2025 |
2025.4.16 | 336 | 4/16/2025 |
2025.3.29 | 286 | 3/29/2025 |
2025.3.28 | 157 | 3/28/2025 |
2025.3.21 | 156 | 3/21/2025 |
2025.3.18 | 295 | 3/18/2025 |
See https://github.com/Devolutions/avalonia-extensions/blob/master/src/Devolutions.AvaloniaTheme.MacOS/CHANGELOG.md
BREAKING: 2025.07.14 - changes default vertical alignment of `TextBlock` to centred