.NET MAUI and Xamarin.Forms Themes
These examples demonstrate applying themes in you .NET MAUI and Xamarin.Forms apps!
You'll learn how to manually select and automatically set app themes, switching between dark/light based on system settings.
Author: Damian Suess
Themes
Android
Make sure that the Android Activity (i.e. MainActivity.cs) includes ConfigChanges.UiMode so that automatic changes can be made.
ConfigurationChanges = ConfigChanges.UiMode | ...
Sample Colors
Light Theme - Detailed
| Name | Hex | Usage |
|---|---|---|
| Navigation Bar | #7e7d81 | Header Navigation Bar Background |
| Navigation Bar Text | #ffffff | Header Navigation Bar Text |
| Page Background | White | Background |
| Primary | 242b3a | Frames |
| Actions | 509ceb | Button faces, links, actionable items (combo down arrow) |
| Control Borders | 656a75 | Control box border |
| CheckBox Checked Bg | 339cf2 | |
| CheckBox Unchecked Bg | 283040 | |
| Text | ffffff | Text Color |
| Text H1 | ffffff | Text Color |
| Text H2 | bec0c4 | |
| Text H3 | ||
| Tab A Selected Bg | 3a4457 | Optional Selected Tab Item Background |
| Tab B Selected Text Bg | transparent |
|
| Tab B Selected Text Fg | ffffff (Bold) | |
| Tab B Selected Bottom Border | 339cf2 | |
| Tab B Unselected Text Fg | 3a4457 | Optional Selected Tab Item Background |
| ListView Background | 283040 | Background of List box |
| ListView Row A | 283040 | Darker row color |
| ListView Row B | 2f3849 | Lighter row color |
| ListView Selected Bg | 27415e |
Dark Theme - Detailed
| Name | Hex | Usage |
|---|---|---|
| Navigation Bar | 1e2532 | Header Navigation Bar Background |
| Navigation Bar Text | 2f3849 | Header Navigation Bar Text |
| Background | 1e2532 | Background |
| Primary | 242b3a | Frames |
| Actions | 509ceb | Button faces, links, actionable items (combo down arrow) |
| Control Borders | 656a75 | Control box border |
| CheckBox Checked Bg | 339cf2 | |
| CheckBox Unchecked Bg | 283040 | |
| Text | ffffff | Text Color |
| Text H1 | ffffff | Text Color |
| Text H2 | bec0c4 | |
| Text H3 | ||
| Tab A Selected Bg | 3a4457 | Optional Selected Tab Item Background |
| Tab B Selected Text Bg | transparent |
|
| Tab B Selected Text Fg | ffffff (Bold) | |
| Tab B Selected Bottom Border | 339cf2 | |
| Tab B Unselected Text Fg | 3a4457 | Optional Selected Tab Item Background |
| ListView Background | 283040 | Background of List box |
| ListView Row A | 283040 | Darker row color |
| ListView Row B | 2f3849 | Lighter row color |
| ListView Selected Bg | 27415e |
Dark Theme - Simple
| Name | Hex |
|---|---|
| BGColor | #282c34 |
| Links | #409eff |
| Text |
Resources
- Theme an Application
- Respond to Theme Changes
- Theme Colors
For Older Xamarin.Forms v4.x
Though this feature is not apart of Xamarin.Essentials (v1.3), it should be available in v1.4 according to PR 927 and Enhancement 923.
Normally, I just piecemeal parts of my larger projects but since Xamarin.Essentials is offering this feature soon, I'll try and use their naming conventions so the transition is smoother!
Methods for theming
There are more than one way to perform this. Here are what others are doing out there