--- title: Avalonia UI Theming - Designing a Theme System From... description: Styling the Button Spinner turns into something much bigger — the foundations of a proper Avalonia theme system. No AI shortcuts, just real hand-coded... canonical: https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Avalonia UI Theming - Designing a Theme System From Scratch | No AI | daily.dev og:description: Styling the Button Spinner turns into something much bigger — the foundations of a proper Avalonia theme system. No AI shortcuts, just real hand-coded... og:url: https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e og:image: https://api.daily.dev/og/posts/8Ao5etr2E.png og:image:alt: Avalonia UI Theming - Designing a Theme System From Scratch | No AI og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Avalonia UI Theming - Designing a Theme System From Scratch | No AI **[AngelSix](https://daily.dev/sources/angelsix)** · 29 min read · 0 upvotes · 0 comments ## Summary 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 YOU'LL 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 ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: --- [View this post on daily.dev](https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Avalonia UI Theming - Designing a Theme System From Scratch | No AI","url":"https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e"},"datePublished":"2026-10-04T13:04:29.786Z","dateModified":"2026-10-04T21:46:55.919Z","description":"Styling the Button Spinner turns into something much bigger — the foundations of a proper Avalonia theme system. No AI shortcuts, just real hand-coded...","image":"https://i.ytimg.com/vi/I5halHoNfH0/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/I5halHoNfH0/sddefault.jpg","isAccessibleForFree":true,"articleSection":"AngelSix","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"AngelSix","logo":"https://media.daily.dev/image/upload/s--h1ikmN_u--/f_auto,q_auto/v1791119063/logos/angelsix?_a=BAMAMicg0","url":"https://daily.dev/sources/angelsix"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/avalonia-ui-theming---designing-a-theme-system-from-scratch-no-ai-8ao5etr2e","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"","timeRequired":"PT29M","video":{"@type":"VideoObject","name":"Avalonia UI Theming - Designing a Theme System From Scratch | No AI","description":"Styling the Button Spinner turns into something much bigger — the foundations of a proper Avalonia theme system. No AI shortcuts, just real hand-coded...","thumbnailUrl":"https://i.ytimg.com/vi/I5halHoNfH0/sddefault.jpg","uploadDate":"2026-10-04T13:04:29.786Z","duration":"PT29M","url":"https://api.daily.dev/r/8Ao5etr2E","embedUrl":"https://www.youtube.com/embed/I5halHoNfH0"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"AngelSix","item":"https://daily.dev/sources/angelsix"},{"@type":"ListItem","position":3,"name":"Avalonia UI Theming - Designing a Theme System From Scratch | No AI"}]} ```