Uploaded July 2025 | Updated September 2026, 3 weeks ago
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Source Code to Series
github.com/angelsix/youtube/tree/develop/Avalonia%20BatchProcess
Code Commit This Episode
github.com/angelsix/youtube/commit/81a13c80d6be925edd8d623c3856f2092e1fc9d2
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk
Support me in my journey to giving back to the industry all my knowledge and helping the world with what I do. Spreading knowledge to those who cannot afford an education and helping those who want to better themselves.
Avalonia UI
avaloniaui.net
Source Code to Series
github.com/angelsix/youtube/tree/develop/Avalonia%20BatchProcess
Code Commit This Episode
github.com/angelsix/youtube/commit/81a13c80d6be925edd8d623c3856f2092e1fc9d2
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk





![Avalonia Just Got a Full Icon System — Heres How I Built It
Avalonia finally has a proper icon system — and it didnt start that way. It started as one
duplicated arrow buried inside a Button Spinner, and by the end of this episode its a fully
source-generated icon library with its own clean namespace.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How a token-based theme engine replaces hardcoded colors/sizes with semantic
values (surface, primary, warning) instead of copy-pasted hex codes
• New focus states on buttons — and how styles smartly blend hover/press colors
with whatever accent is active
• The Control Template rule that matters more than any other: only use
TemplateBinding inside a template, or you silently block every style override
• How one duplicated arrow (stream geometry) turned into a full icon system
• The new `icons:` syntax and the ThemeIconGallery — swap an entire icon set by
swapping one class
• Why icons were cluttering the theme namespace, and how a source generator
(Angel6 Theme Engine NuGet v1.2.6) solves it cleanly
• A live Icon Gallery preview for browsing and customizing every glyph
• Whats next: full control coverage, a demo app, and a live in-app theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Theme Lab intro & progress recap
[0:43] – Why we switched to a prototype-first approach
[1:40] – Button focus states & smart accent blending
[2:45] – The one Control Template rule you must never break
[4:10] – Refining the Button: fonts, padding, focus styles
[5:05] – From one duplicated arrow to a full icon system
[6:00] – New icon syntax & the ThemeIconGallery
[7:25] – Source generators: giving icons their own clean namespace
[9:25] – Icon Gallery preview & customizing individual glyphs
[10:45] – Whats next: full coverage, localization, live theme editor
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Ep 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
▶ Ep 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
▶ Ep 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
▶ Ep 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
▶ Ep 5 – Checkbox Deep Dive: https://www.youtube.com/watch?v=uIimnwjITT0
▶ Ep 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY
▶ Ep 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U
▶ Ep 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8
▶ Ep 9 – Surgical Legacy Code Removal: https://www.youtube.com/watch?v=5-p_fnOi0As
▶ Ep 10 – One Token System: https://www.youtube.com/watch?v=JEcD1XXIiA8
▶ Ep 11 – Styles Not Working? Breaking the Rule: https://www.youtube.com/watch?v=OhJN8Ssp2hA
📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: https://github.com/angelsix
🌐 AngelSix: https://www.angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #iconpack #sourcegenerators #softwaretutorial Avalonia Just Got a Full Icon System — Heres How I Built It](https://i.ytimg.com/vi/N5HPe5GYCPo/mqdefault.jpg)


![Avalonia UI Theming - Theme Engine From Scratch | No AI
Avalonia has never had a proper theme engine — until now. After a full week of deep refactoring, Ive designed and built a brand new C#-driven theme engine that replaces static XAML resource dictionaries with dynamic, MVVM-bound, fully IntelliSense-supported theme properties. No AI wrote this. A real person architected every piece.
This is the biggest leap forward in the series so far. The entire theming system has been reduced to just two classes and a NuGet package — and it gives you absolute power over your themes: live switching, data-bound values, even themes that react to external events in real-time.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• Why defining themes in XAML is fundamentally limiting — and the case for C# instead
• How current Avalonia theming fails: hard-coded values, no IntelliSense, no binding
• The dead ends I hit (including why modifying XAMLX was a non-starter)
• The breakthrough: markup extensions as the entry point for theme:PropertyName syntax
• Full IntelliSense for every theme property directly in XAML
• ThemeContext — a singleton injected via DI that holds the active theme
• Themes as simple C# classes inheriting from an abstract Theme base
• Live theme switching: toggle themes at runtime and watch the UI update instantly
• Binding theme values to external data — including a demo where BaseScale changes every second from the system clock
• Auto-generated C# files that power the IntelliSense and markup resolution
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction — a week of redesigning the theme system
[2:29] – Why XAML is the wrong place to define themes
[4:50] – The XAMLX dead end — why patching the compiler wasnt viable
[7:24] – The breakthrough: markup extensions & the new architecture
[9:15] – ThemeContext, dependency injection & the singleton pattern
[10:30] – Themes as C# classes — inheriting from abstract Theme
[12:02] – Full IntelliSense demo for theme: syntax in XAML
[13:45] – Live theme switching — toggling themes at runtime
[15:20] – Binding ThemeContext in XAML & the single naming requirement
[16:10] – How auto-generated files power the system behind the scenes
[20:00] – The crazy demo: BaseScale driven by the system clock
[21:07] – Wrap up & whats next
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 LINKS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
▶ Part 1 – Setup: https://www.youtube.com/watch?v=rUKlQnjU0tc
▶ Part 2 – Buttons: https://www.youtube.com/watch?v=oKjk6pyyARI
▶ Part 3 – Button Spinner Anatomy: https://www.youtube.com/watch?v=WMaTbXkvm9g
▶ Part 4 – Designing a Theme System: https://www.youtube.com/watch?v=I5halHoNfH0
▶ Part 5 – Checkbox Anatomy: https://www.youtube.com/watch?v=uIimnwjITT0
▶ Part 6 – Checkbox Styling: https://www.youtube.com/watch?v=uv1bNrfCjtY
📺 Full Series Playlist: https://www.youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
💾 Source Code: https://github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
🌐 AngelSix: https://www.angelsix.com
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📺 SERIES: Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding Avalonia UI Theming - Theme Engine From Scratch | No AI](https://i.ytimg.com/vi/NXz8hwITg5U/mqdefault.jpg)

