<StackLayout>\n <Frame BackgroundColor=\"#2196F3\" Padding=\"36,48,36,36\" CornerRadius=\"0\">\n <Label Text=\"Welcome to Xamarin.Forms!\" HorizontalTextAlignment=\"Center\" TextColor=\"White\" FontSize=\"36\" \/>\n <\/Frame>\n <Label Text=\"Start developing now\" FontSize=\"Title\" Padding=\"30,10,30,10\" \/>\n <Label Text=\"Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!\" FontSize=\"16\" Padding=\"30,0,30,0\" \/>\n <Label FontSize=\"16\" Padding=\"30,24,30,0\">\n <Label.FormattedText>\n <FormattedString>\n <FormattedString.Spans>\n <Span Text=\"Learn more at \" \/>\n <Span Text=\"https:\/\/aka.ms\/xamarin-quickstart\" FontAttributes=\"Bold\" \/>\n <\/FormattedString.Spans>\n <\/FormattedString>\n <\/Label.FormattedText>\n <\/Label>\n <\/StackLayout>\n<\/code><\/pre>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/07\/apptheme-default.gif\")
<\/p>\n
When you toggle the iOS simulator between dark and light modes (CMD+SHFT+A) you can see the ContentPage<\/code> background shift from white to black, and the text from black to white. Those are default platform colors. Contrast that with the header which remains blue and the header text that remains white. Those are explicit colors set in code.<\/p>\nTake Control of the Dark<\/h2>\n
To now control the colors for the dark and light of the head and text, you can replace the static colors with an AppThemeBinding<\/code> that will react at runtime to the OS theme settings. First enable this preview feature by adding the flag to your App.xaml.cs:<\/p>\npublic App()\n{\n Device.SetFlags(new string[]{ \"AppTheme_Experimental\" });\n\n InitializeComponent();\n}\n<\/code><\/pre>\nUpdating just the header, this looks like:<\/p>\n
<Frame BackgroundColor=\"{AppThemeBinding Dark=#2196F3, Light=#2196F3}\" Padding=\"36,48,36,36\" CornerRadius=\"0\">\n <Label Text=\"Welcome to Xamarin.Forms!\" HorizontalTextAlignment=\"Center\" TextColor=\"{AppThemeBinding Dark=DarkBlue, Light=White}\" FontSize=\"36\" \/>\n <\/Frame>\n<\/code><\/pre>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/07\/apptheme-explicit.gif\")
<\/p>\n
You can of course refactor these to styles like this:<\/p>\n
<ContentPage.Resources>\n <Style x:Key=\"HeaderBg\" TargetType=\"Frame\">\n <Setter Property=\"BackgroundColor\" Value=\"{AppThemeBinding Dark=#1d1d1d, Light=#2196F3}\"\/>\n <Setter Property=\"Padding\" Value=\"36,48,36,36\"\/>\n <Setter Property=\"CornerRadius\" Value=\"0\"\/>\n <\/Style>\n\n <Style x:Key=\"HeaderTitle\" TargetType=\"Label\">\n <Setter Property=\"TextColor\" Value=\"{AppThemeBinding Dark=#F1F1F1, Light=White}\"\/>\n <Setter Property=\"HorizontalTextAlignment\" Value=\"Center\"\/>\n <Setter Property=\"FontSize\" Value=\"36\"\/>\n <\/Style>\n<\/ContentPage.Resources>\n\n<Frame Style=\"{StaticResource HeaderBg}\">\n <Label\n Style=\"{StaticResource HeaderTitle}\"\n Text=\"Welcome to Xamarin.Forms!\" \/>\n<\/Frame>\n<\/code><\/pre>\nAnd if you wish to use predefined color styles, it might look like this:<\/p>\n
<Color x:Key=\"Background_Dark\">#1d1d1d<\/Color>\n<Color x:Key=\"Background_Light\">#1d1d1d<\/Color>\n<Style x:Key=\"HeaderBg\" TargetType=\"Frame\">\n <Setter Property=\"BackgroundColor\" Value=\"{AppThemeBinding Dark={StaticResource Background_Dark}, Light={StaticResource Background_Light}}\"\/>\n<\/code><\/pre>\nLetting the User Choose<\/h2>\n
Sometime you may want to give the app user control over the theme instead of relying on the OS theme. To do this, you need only to provide a way to set the App.Current.UserAppTheme<\/code> like this:<\/p>\nApp.Current.UserAppTheme = OSAppTheme.Dark;\n<\/code><\/pre>\n![\"app](\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/07\/apptheme-user.gif\")
<\/p>\n
Then, to reset the app to respond automatically to OS theme changes, you can set it back to “Unspecified”:<\/p>\n
App.Current.UserAppTheme = OSAppTheme.Unspecified;\n<\/code><\/pre>\nNow create the above experience, add three checkboxes to your UI for default, dark, and light.<\/p>\n
<StackLayout Orientation=\"Horizontal\" Spacing=\"10\">\n <CheckBox IsChecked=\"{Binding UseDeviceThemeSettings}\" VerticalOptions=\"Center\" \/>\n <Label Text=\"Use device settings\"\n VerticalOptions=\"Center\"\/>\n<\/StackLayout>\n\n<StackLayout\n IsVisible=\"{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}\"\n Orientation=\"Horizontal\"\n Spacing=\"10\">\n <CheckBox IsChecked=\"{Binding UseDarkMode}\" VerticalOptions=\"Center\"\/>\n <Label Text=\"Dark Theme\"\n VerticalOptions=\"Center\"\/>\n<\/StackLayout>\n\n<StackLayout\n IsVisible=\"{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}\"\n Orientation=\"Horizontal\"\n Spacing=\"10\">\n <CheckBox IsChecked=\"{Binding UseLightMode}\" VerticalOptions=\"Center\"\/>\n <Label Text=\"Light Theme\"\n VerticalOptions=\"Center\"\/>\n<\/StackLayout>\n<\/code><\/pre>\nThen add the public properties to the BindingContext for the page, in this case the page handles its own state.<\/p>\n
public MainPage()\n{\n BindingContext = this;\n InitializeComponent();\n}\n\nprivate bool _useDarkMode;\npublic bool UseDarkMode {\n get {\n return _useDarkMode;\n }\n set {\n _useDarkMode = value;\n if(_useDarkMode)\n {\n UseLightMode = UseDeviceThemeSettings = false;\n App.Current.UserAppTheme = OSAppTheme.Dark;\n }\n\n }\n}\n\nprivate bool _useLightMode;\npublic bool UseLightMode\n{\n get\n {\n return _useLightMode;\n }\n set\n {\n _useLightMode = value;\n if (_useLightMode)\n {\n UseDarkMode = UseDeviceThemeSettings = false;\n App.Current.UserAppTheme = OSAppTheme.Light;\n }\n }\n}\n\nprivate bool _useDeviceThemeSettings = true;\npublic bool UseDeviceThemeSettings\n{\n get\n {\n return _useDeviceThemeSettings;\n }\n set\n {\n _useDeviceThemeSettings = value;\n if(_useDeviceThemeSettings)\n {\n App.Current.UserAppTheme = OSAppTheme.Unspecified;\n }\n }\n\n}\n<\/code><\/pre>\nThe code above handles toggling between dark and light according to the user’s preference in the app, and then switching between user preference and OS theme preference.<\/p>\n
That’s a Wrap<\/h2>\n
This new dark and light mode theme helper, AppThemeBinding<\/code> along with UserAppTheme<\/code> make it really easy to handle theme modes in your Xamarin.Forms apps. This works not only for colors, but images and other resources as well. As shown previously, it even works with the new Shapes and Paths introduced in Xamarin.Forms 4.7 too!<\/p>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/xamarin\/wp-content\/uploads\/sites\/44\/2020\/07\/apptheme-shapes.gif\")
<\/p>\n
For more information on app themes, check out the system theme changes documentation<\/a>. If you want to go even further than dark and light themes, then check out using dynamic resources and even loading themes at runtime to theme your applications<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"This new dark and light mode theme helper, AppThemeBinding along with UserAppTheme make it really easy to handle theme modes in your Xamarin.Forms apps. <\/p>\n","protected":false},"author":553,"featured_media":47528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1,291,367,7745],"tags":[9011,9010,27,9012,16],"class_list":["post-47525","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-xamarin","category-xamarin-platform","category-xamarin-forms","category-xaml","tag-app-themes","tag-mobile-applications","tag-xamarin","tag-xamarin-developers","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
This new dark and light mode theme helper, AppThemeBinding along with UserAppTheme make it really easy to handle theme modes in your Xamarin.Forms apps. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=47525"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/47525\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/47528"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=47525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=47525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=47525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}