Uploaded August 2026 | Updated September 2026, 1 week ago
Stop defining 20 shades of the same color by hand.
In this episode I rebuild the Avalonia theme around Color Ramps — define ONE primary color and get 10 light shades and 10 dark shades automatically, with a mirrored ramp that makes dark mode just work. Plus a new icon pipeline that loads SVGs automatically.
No more "surface on surface raised" chaos. One value, every control themed, light and dark.
━━━━━━━━━━━━━━━
WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━
• What Color Ramps are — 10 light + 10 dark shades auto-calculated from one primary hue
• How the mirrored ramp fixes dark mode contrast automatically
• Why I killed "surface / on surface" naming for simple accent names (neutral, primary, success etc)
• How one accent brush + accent kind now styles every control (neutral = default theme)
• How the theme is now split into Color and Size for sanity
• How the Roslyn source generator now auto-loads SVG icons into geometry paths — no more embedded CS files
• How to override with your own Brand Theme (change neutral and your whole app retints)
• What's next — source-generating the ramps + full demo app with in-app editing
━━━━━━━━━━━━━━━
TIMESTAMPS
━━━━━━━━━━━━━━━
00:00 — The theme was getting massive — time to fix it
00:37 — Project cleanup — new folder structure
01:00 — Icons before: embedded in CS files — now: auto-loaded SVGs
01:57 — Source generator + Roslyn Analyzer for the entire icon gallery
02:03 — Introducing Color Ramps — one color, 20 shades
03:05 — From manual surface colors to auto-calculated shades
03:51 — Button style with new accent brush (light / dark)
04:27 — Splitting theme into Color and Size definitions
04:58 — Unified styles — default is now just "neutral" accent
06:15 — Customizing default accent kind + brand themes
06:57 — The mirrored ramp — automatic dark theme
08:27 — How accent brush + accent kind work together
10:02 — Future: auto-generating ramps & accents so you don't wire XAML by hand
10:39 — Next — reviewing every control + building the demo theme lab
━━━━━━━━━━━━━━━
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 — One Accent Color That Styles Your Entire Avalonia UI — Accents
15 — This Video — Color Ramps (One Color, Twenty Shades)
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
Stop defining 20 shades of the same color by hand.
In this episode I rebuild the Avalonia theme around Color Ramps — define ONE primary color and get 10 light shades and 10 dark shades automatically, with a mirrored ramp that makes dark mode just work. Plus a new icon pipeline that loads SVGs automatically.
No more "surface on surface raised" chaos. One value, every control themed, light and dark.
━━━━━━━━━━━━━━━
WHAT YOU'LL LEARN
━━━━━━━━━━━━━━━
• What Color Ramps are — 10 light + 10 dark shades auto-calculated from one primary hue
• How the mirrored ramp fixes dark mode contrast automatically
• Why I killed "surface / on surface" naming for simple accent names (neutral, primary, success etc)
• How one accent brush + accent kind now styles every control (neutral = default theme)
• How the theme is now split into Color and Size for sanity
• How the Roslyn source generator now auto-loads SVG icons into geometry paths — no more embedded CS files
• How to override with your own Brand Theme (change neutral and your whole app retints)
• What's next — source-generating the ramps + full demo app with in-app editing
━━━━━━━━━━━━━━━
TIMESTAMPS
━━━━━━━━━━━━━━━
00:00 — The theme was getting massive — time to fix it
00:37 — Project cleanup — new folder structure
01:00 — Icons before: embedded in CS files — now: auto-loaded SVGs
01:57 — Source generator + Roslyn Analyzer for the entire icon gallery
02:03 — Introducing Color Ramps — one color, 20 shades
03:05 — From manual surface colors to auto-calculated shades
03:51 — Button style with new accent brush (light / dark)
04:27 — Splitting theme into Color and Size definitions
04:58 — Unified styles — default is now just "neutral" accent
06:15 — Customizing default accent kind + brand themes
06:57 — The mirrored ramp — automatic dark theme
08:27 — How accent brush + accent kind work together
10:02 — Future: auto-generating ramps & accents so you don't wire XAML by hand
10:39 — Next — reviewing every control + building the demo theme lab
━━━━━━━━━━━━━━━
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 — One Accent Color That Styles Your Entire Avalonia UI — Accents
15 — This Video — Color Ramps (One Color, Twenty Shades)
#avalonia #avaloniaui #xaml #csharp #dotnet #uiux #desktopapp #softwaretutorial #coding
