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
Make sure that the Android Activity (i.e. MainActivity.cs) includes ConfigChanges.UiMode so that automatic changes can be made.
[Activity(Theme = "@style/MainTheme",
ConfigurationChanges = ConfigChanges.UiMode | ...| 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 |
| 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 |
| Name | Hex |
|---|---|
| BGColor | #282c34 |
| Links | #409eff |
| Text |
- Theme an Application
- Respond to Theme Changes
- Theme Colors
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!
There are more than one way to perform this. Here are what others are doing out there
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent