.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.

  [Activity(Theme = "@style/MainTheme",
            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
  • https://electronjs.org/apps/marktext
  • https://github.com/marktext/marktext
  • https://marktext.app/

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

• Simple Theming Method
  • Theming Demo - GitHub
• Material Themes
• Old Docs
• Find System Theme
  • Asked on StackOverflow