Skip to content

Demonstration of app themes using Xamarin.Forms and system dark theme

Notifications You must be signed in to change notification settings

DamianSuess/Learn.AppThemes

Repository files navigation

.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

Screen Shot

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

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

Releases

No releases published

Packages

No packages published

Languages