Uploaded August 2026 | Updated September 2026, 1 week ago

---

I deleted 70% of my Avalonia theme — and everything still works.

The DefaultTheme file went from 600 lines to 178. Button styles went from 35 lines to 22. No manual color shades, no copy-pasted sizes. One token file now drives the entire app — colors, sizes, radii, and states — with source generators wiring the rest automatically.

In this episode I break down the token reduction pass: how color ramps, size scales, and attribute-based styling replaced thousands of lines of duplication.

━━━━━━━━━━━━━━━━
📌 WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━━
• Why the old theme exploded to 600+ lines and why it was unmaintainable
• How the token system centralizes everything into one DefaultTheme file (600 → 200 → 178 lines)
• How source generators create color ramps automatically — define one hue, get 10 light + 10 dark shades
• What overlay levels and accent hues are and how they handle blending
• How the size scale works — base size + multipliers for CornerRadius, Thickness, spacing and fonts
• Why I moved from class-based to attribute-based styling for states (pressed/hover) — and how it restores IntelliSense
• How one AccentBrush now handles default + accented states so you can retint the whole app by changing one value
• What the cleaned-up Button style actually looks like now (35 → 22 lines)

━━━━━━━━━━━━━━━━
⏱ TIMESTAMPS
━━━━━━━━━━━━━━━━
00:00 — The ridiculously clean theme — where we're heading
00:23 — The 600-line problem — DefaultTheme file reduction
00:45 — Stripping the base theme — introducing the token system
01:47 — Automated color generation — ramps, accent hues & overlay levels
06:22 — Automated size generation — scales, radii & thickness
09:08 — Control heights, widths & custom labels
11:26 — Cleaned-up control styles — button styling from 35 to 22 lines
14:46 — From classes to attributes — states with IntelliSense
18:45 — What's next — merging dark theme, standardizing defaults & contrast
20:37 — Live demo — retinting the whole app from one value

━━━━━━━━━━━━━━━━
🔗 LINKS & RESOURCES
━━━━━━━━━━━━━━━━
▶ Full Avalonia Themes Playlist: youtube.com/playlist?list=PLrW43fNmjaQVE2vDBeWD8QYIm06w6bKyO
▶ Source Code (AvaloniaThemeLab): github.com/angelsix/youtube/tree/develop/AvaloniaThemeLab
▶ GitHub: github.com/angelsix
▶ Website: angelsix.com

━━━━━━━━━━━━━━━━
📚 SERIES — Avalonia UI Theming – Hand Coded From Scratch
━━━━━━━━━━━━━━━━
01 — Setup — youtube.com/watch?v=rUKlQnjU0tc
02 — Buttons | Hand Coded From Scratch — youtube.com/watch?v=oKjk6pyyARI
03 — Button Spinner | Anatomy & Internals — youtube.com/watch?v=WMaTbXkvm9g
04 — Designing a Theme System From Scratch — youtube.com/watch?v=I5halHoNfH0
05 — Checkbox Control Deep Dive — youtube.com/watch?v=uIimnwjITT0
06 — Checkbox Styling — youtube.com/watch?v=uv1bNrfCjtY
07 — Theme Engine From Scratch — youtube.com/watch?v=NXz8hwITg5U
08 — Building a Design Token System — youtube.com/watch?v=QMVdxRZqaU8
09 — One Token System for the Entire Theme — youtube.com/watch?v=JEcD1XXIiA8
10 — Avalonia Styles Not Working? You're Breaking This Rule — youtube.com/watch?v=OhJN8Ssp2hA
11 — Avalonia Just Got a Full Icon System — youtube.com/watch?v=N5HPe5GYCPo
12 — Breaking Every Avalonia Control On Purpose — youtube.com/watch?v=OmVFU-iowqI
13 — Avalonia Tool That Finds Bugs My Compiler Can't See — youtube.com/watch?v=WQB5kFJWRmc
14 — The Avalonia Accent System That Generates Its Own Shades — youtube.com/watch?v=YFQEVLaYk94
15 — The Color Ramp That Themes Your Whole App — youtube.com/watch?v=xhnUQOOrShs
16 — This Video — Theme Token Reduction (One File, Every Control)

#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding