syncfusion-maui-toolkit-theming
About syncfusion-maui-toolkit-theming
A theming guide for developers building Syncfusion .NET MAUI applications. It covers built-in Material themes, runtime switching, style overrides, and custom theme creation, as well as system theme synchronization and theme key lookup.
Key features
- 01Configure the shared theme resource dictionary
- 02Apply Material light and dark themes
- 03Switch themes at runtime and sync with the system
- 04Override control styles and color keys
- 05Create custom themes and locate theme keys
Use cases
- 01Applying a light or dark theme to an app
- 02Switching themes dynamically based on user preferences
- 03Setting consistent component appearance and brand styles
- 04Creating high-contrast or corporate themes
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/syncfusion-maui-toolkit-themingin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/applying-themes.mdcreating-custom-themes.mdoverriding-themes.mdtheme-keys-reference.mdtheme-switching.mdDetails
From the project READMETheming in Syncfusion .NET MAUI
Complete guide for applying, customizing, and creating themes across all Syncfusion .NET MAUI components.
When to Use This Skill
Use this skill when you need to:
- Apply light or dark themes (MaterialLight, MaterialDark)
- Configure
SyncfusionThemeResourceDictionaryin applications - Switch themes dynamically at runtime
- Override default theme colors for specific controls
- Customize control-specific styles and appearances
- Create completely custom themes from scratch
- Apply consistent branding across all components
- Implement system theme synchronization
- Troubleshoot theme-related styling issues
- Find theme keys for specific UI elements
Component Overview
Syncfusion's theming system provides a unified way to style all MAUI components through the SyncfusionThemeResourceDictionary. This centralized approach offers:
- Automatic Merging: Control-specific styles automatically included
- Consistent Appearance: Uniform look across all components
- Easy Theme Switching: Change themes at runtime
- Flexible Customization: Override specific keys or create custom themes
- Platform Themes: Material design support
Available Themes:
MaterialLight- Material Design light themeMaterialDark- Material Design dark theme
Documentation and Navigation Guide
Basic Theme Setup
📄 Read: references/applying-themes.md
- Installing and configuring SyncfusionThemeResourceDictionary
- Available theme options (Material)
- Setting up themes in App.xaml
- Automatic merging of control styles
- Platform-specific theme application
- VisualTheme property usage
Runtime Theme Switching
📄 Read: references/theme-switching.md
- Dynamically changing themes at runtime
- ViewModel pattern for theme management
- Removing and adding theme dictionaries
- User preference persistence
- Syncing with system/OS theme
- Edge cases and troubleshooting
Customizing Default Themes
📄 Read: references/overriding-themes.md
- Overriding specific theme color keys
- Control-specific key customization
- Primary vs control-specific keys
- Merged dictionaries layer order
- Selective customization strategies
- Common branding scenarios
Creating Custom Themes
📄 Read: references/creating-custom-themes.md
- Building themes from scratch
- Theme key registration pattern
- Custom color scheme definition
- Complete theme implementation
- Corporate branding themes
- Accessibility themes (high contrast)
Theme Keys Reference
📄 Read: references/theme-keys-reference.md
- Key naming conventions
- Structure: Sf{ControlName}{Element}{Property}
- Common control keys by category
- Finding keys for any control
- Official documentation references