Uploaded November 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/StreamElectronics
Code Commit This Episode
github.com/angelsix/youtube/commit/acdb7b1024ded7e0bbdf992296e6c52805b53e0e
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/StreamElectronics
Code Commit This Episode
github.com/angelsix/youtube/commit/acdb7b1024ded7e0bbdf992296e6c52805b53e0e
Support what I do and pay for me to survive
angelsix.com/donate
Live Chat at Discord
discordapp.com/invite/eHr5BMk





![Avalonia UI Theming - Designing a Theme System From Scratch | No AI
Styling the Button Spinner turns into something much bigger — the foundations of a proper Avalonia theme system. No AI shortcuts, just real hand-coded engineering. We refactor colour duplication, centralise theme resources, and apply them consistently across controls.
This is part of a complete series on building a fully custom Avalonia UI theme from scratch, hand-coded with zero AI assistance.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How to centralise colours into a numbered ThemeColor resource system
• Creating SolidColorBrush and LinearGradientBrush from ThemeColor definitions
• Eliminating code duplication across control styles
• The difference between StaticResource and DynamicResource — and when it matters
• How to correctly use TemplateBinding vs DynamicResource in a ContentPresenter
• Applying consistent hover, pressed and disabled states across multiple controls
• Introducing ThemeColorAccent brushes for error and highlight states
• Why prototype theming starts colourless and builds up from layout first
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction & prototype style goals for the Button Spinner
[0:56] – Prototype philosophy: layout and precision before aesthetics
[1:36] – Identifying code duplication & the case for a central theme
[3:36] – Building the ThemeColor resource system (ThemeColorOne to Five)
[6:20] – Creating SolidColorBrush resources from ThemeColor definitions
[8:10] – Applying theme brushes to button hover & pressed states
[11:00] – Button template cleanup: removing redundant selectors & setters
[13:50] – Validating the refactor — everything builds and works
[15:00] – Styling the Button Spinner with the new theme system
[17:00] – Fixing DynamicResource vs TemplateBinding issues
[19:25] – ContentPresenter corrections & disabled state styling
[23:05] – Introducing ThemeColorAccent brushes for error & highlight states
[28:35] – Conclusion & next steps for the theme system
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 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: [link - add once live]
📺 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 - Designing a Theme System From Scratch | No AI](https://i.ytimg.com/vi/I5halHoNfH0/mqdefault.jpg)

![One Token System for the Entire Avalonia Theme | Dev + AI
Hundreds of random hardcoded values scattered across every control in the theme. Margins,
thicknesses, font sizes — all over the place, inconsistent, unmaintainable. In this episode
we do the deduplication pass: collapsing everything down to a minimal, precise set of design
tokens that defines the entire theme system.
AI does the grunt work again — but the interesting part is what happens when it goes off-brief.
Real-time corrections, naming convention debates, a new Scaled markup extension that solves
proportional scaling for edge-case values, and a moment where the AI adds things I explicitly
told it not to. This is what collaborative AI development actually looks like in practice.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📌 WHAT YOULL LEARN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
• How to use AI to find and replace hundreds of scattered hardcoded values across a theme
• Adding new token properties to the engine: font family, font sizes, control height, icon
• What the Adorner Layer is and how to correctly map its thickness values to tokens
• How to establish naming conventions for thickness and spacing tokens — with real examples
• When NOT to add a value to the token set — the token bloat problem and how to avoid it
• Styling AutoCompleteBox: placeholder text, border brushes, padding, drop-down height
• The Scaled markup extension — what it is, why its needed, and how to implement it right
• How to handle negative margins using Edges + a negative multiplier
• How to correct AI when it goes off-brief — real examples of steering it back in real-time
• The ultimate goal: swap any compliant theme without a single line of application code
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0:00] – Introduction — new theme engine recap, goal of the deduplication pass
[0:25] – Using AI to find and replace legacy dynamic resources
[0:48] – New token properties added: font family, font sizes, control height, icon
[1:04] – Button control reviewed — already clean, moving on
[1:31] – What the Adorner Layer is and why it draws on its own visual layer
[3:08] – Prompting AI to merge AdornerLayer thickness values into the theme engine
[3:56] – Moving to AutoCompleteBox — placeholder, borders, padding
[8:49] – AIs first response on AdornerLayer thickness mapping
[11:08] – Decision: add dedicated thickness tokens to the engine
[11:59] – AI identifies further inline resources across other controls
[13:41] – Asking AI for thickness token naming conventions
[13:52] – AIs full token proposal reviewed and critiqued
[14:26] – The token bloat problem — when NOT to add a new token
[18:11] – Policy decision: how to snap stray values to existing tokens
[20:08] – AutoCompleteBox: border brush and accent brush tokens
[21:45] – MaxDropDownHeight and margin replacement
[23:27] – ⚠️ AI adds unwanted spacing values — correcting it in real-time
[24:17] – Introducing the Scaled markup extension for proportional custom values
[26:09] – Problem: Scaled extension hardcoded to ThemeContext — feedback given to AI
[28:17] – Further AI instructions on the Scaled extension + remaining issues
[32:59] – Bug fix discovered in Avalonia source code for AutoCompleteBox
[33:42] – Negative margins fixed with Edges + negative multiplier
[34:07] – Git diff review: AdornerLayer and AutoCompleteBox fully cleaned up
[36:45] – The ultimate goal: seamless theme swapping without any application code changes
[38:00] – Wrap up & next steps
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔗 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
▶ Part 7 – Theme Engine From Scratch: https://www.youtube.com/watch?v=NXz8hwITg5U
▶ Part 8 – Design Token System: https://www.youtube.com/watch?v=QMVdxRZqaU8
▶ Part 9 – Stripping Legacy Code: https://www.youtube.com/watch?v=5-p_fnOi0As
📺 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 #aiagent #aitools #softwaretutorial #coding One Token System for the Entire Avalonia Theme | Dev + AI](https://i.ytimg.com/vi/JEcD1XXIiA8/mqdefault.jpg)


