{"id":45181,"date":"2019-08-30T09:50:16","date_gmt":"2019-08-30T16:50:16","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=45181"},"modified":"2019-09-04T13:05:00","modified_gmt":"2019-09-04T20:05:00","slug":"modernizing-ios-apps-dark-mode-xamarin","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/modernizing-ios-apps-dark-mode-xamarin\/","title":{"rendered":"Modernizing iOS Apps for Dark Mode with Xamarin"},"content":{"rendered":"

With iOS 13, Apple introduces dark mode: A system-wide option for light and dark themes. iOS users may now choose the theme or allow iOS to dynamically change appearance based on the environment and time. Xamarin.iOS and Xamarin.Forms deliver native iOS experiences to keep your applications looking shiny and fresh no matter what time of day.<\/p>\n

Turning on Dark Mode<\/h2>\n

Before testing that your work to support appearance modes actually works, you\u2019ll need to put your simulator into dark mode. In your chosen iOS 13 simulator, open Settings<\/strong> and scroll down to Developer<\/strong>. There you will find a switch for turning dark appearance ON or OFF. It only takes a second to see changes take effect across the entire simulator environment. Now you are ready to customize your app for both modes, as well as see your UI respond instantly!<\/p>\n

\"Turning<\/p>\n


<\/p>\n

Assets for Light and Dark Modes<\/h2>\n

The iOS Asset Catalog in Visual Studio now supports supplying optional images and colors for each appearance mode. When using this functionality, iOS will automatically choose the appropriate image and color for you. Open your Assets.xcassets<\/code> file in your iOS project and add a New Image<\/strong> set. Notice you can specify universal, dark, and light images at any of the target resolutions. In this example, there is an image for dark and for light with the name of \u201cMicrosoftLogo\u201d.<\/p>\n

\"Assets<\/p>\n

Additionally, notice there are also colors specified for “BackgroundColor” and “TitleColor”. Those colors are now available by name to be used throughout the application. The “BackgroundColor” has been assigned to the background of the view, and the “TitleColor” to the label you see on screen.<\/p>\n

\"Assets<\/p>\n

Docs:<\/strong> Dark Mode for iOS 13 Preview<\/a><\/p>\n

Xamarin.Forms<\/h2>\n

All of the above applies to Xamarin.Forms as well! We know many of you prefer to share as much code as possible, and that includes styles. The Xamarin.Forms team has drafted a proposal<\/a> for how we might surface appearance mode support and semantic colors. Be sure to review that and add your comments. <\/p>\n

Let’s take a look at how difficult it is to support Dark Mode in Xamarin.Forms today. (HINT: it’s really easy \ud83d\ude09<\/a> )<\/p>\n

In this sample app, Xappy<\/a>, there are resource dictionaries<\/a> for dark and light themes. Each theme builds upon the base of shared styles for the application.<\/p>\n

<ResourceDictionary xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\r\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n             x:Class=\"Xappy.Styles.DarkTheme\"\r\n             Source=\"DefaultTheme.xaml\">\r\n\r\n    <Color x:Key=\"backgroundColor\">#FF000000<\/Color>\r\n    \r\n    <Color x:Key=\"TextPrimaryColor\">#B0FFFFFF<\/Color>\r\n    <Color x:Key=\"TextSecondaryColor\">#B0FFFFFF<\/Color>\r\n    <Color x:Key=\"TextTernaryColor\">#C8C8C8<\/Color>\r\n<\/ResourceDictionary><\/pre>\n
<ResourceDictionary xmlns=\"http:\/\/xamarin.com\/schemas\/2014\/forms\"\r\n             xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n             x:Class=\"Xappy.Styles.WhiteTheme\"\r\n             Source=\"DefaultTheme.xaml\">\r\n\r\n    <Color x:Key=\"backgroundColor\">#FFFFFFFF<\/Color>\r\n\r\n    <Color x:Key=\"TextPrimaryColor\">#B0000000<\/Color>\r\n    <Color x:Key=\"TextSecondaryColor\">#80000000<\/Color>\r\n    <Color x:Key=\"TextTernaryColor\">#C8C8C8<\/Color>\r\n<\/ResourceDictionary><\/pre>\n
To make sure the colors update when the styles are changed, you’ll want to use the DynamicResource<\/span><\/a>\u00a0\u00a0markup extension. If no updates or changes are needed, use the StaticResource<\/span>\u00a0markup extension.<\/p>\n
Shell.BackgroundColor=\"{DynamicResource backgroundColor}\"\r\nBackgroundColor=\"{DynamicResource backgroundColor}\"\r\nShell.TitleColor=\"{StaticResource cerulean}\"\r\n<\/pre>\n
Since we are using cross-platform styling here, we need to manage iOS changes in appearance mode. This is easily done in a page renderer by listening to the UITraitCollection<\/a> change. This is the PageRenderer<\/a> added to the Xappy.iOS project:<\/p>\n
using System;\r\nusing UIKit;\r\nusing Xamarin.Forms;\r\nusing Xamarin.Forms.Platform.iOS;\r\nusing Xappy.Styles;\r\n\r\n[assembly: ExportRenderer(typeof(ContentPage), typeof(Xappy.iOS.Renderers.PageRenderer))]\r\nnamespace Xappy.iOS.Renderers\r\n{\r\n    public class PageRenderer : Xamarin.Forms.Platform.iOS.PageRenderer\r\n    {\r\n        protected override void OnElementChanged(VisualElementChangedEventArgs e)\r\n        {\r\n            base.OnElementChanged(e);\r\n\r\n            if (e.OldElement != null || Element == null)\r\n            {\r\n                return;\r\n            }\r\n\r\n            try\r\n            {\r\n                SetAppTheme();\r\n            }\r\n            catch (Exception ex)\r\n            {\r\n                System.Diagnostics.Debug.WriteLine($\"\\t\\t\\tERROR: {ex.Message}\");\r\n            }\r\n        }\r\n\r\n        public override void TraitCollectionDidChange(UITraitCollection previousTraitCollection)\r\n        {\r\n            base.TraitCollectionDidChange(previousTraitCollection);\r\n            Console.WriteLine($\"TraitCollectionDidChange: {TraitCollection.UserInterfaceStyle} != {previousTraitCollection.UserInterfaceStyle}\");\r\n\r\n            if(this.TraitCollection.UserInterfaceStyle != previousTraitCollection.UserInterfaceStyle)\r\n            {\r\n                SetAppTheme();\r\n            }\r\n\r\n            \r\n        }\r\n\r\n        void SetAppTheme()\r\n        {\r\n            if (this.TraitCollection.UserInterfaceStyle == UIUserInterfaceStyle.Dark)\r\n            {\r\n                if (App.AppTheme == \"dark\")\r\n                    return;\r\n                \r\n                App.Current.Resources = new DarkTheme();\r\n\r\n                App.AppTheme = \"dark\";\r\n            }\r\n            else\r\n            {\r\n                if (App.AppTheme != \"dark\")\r\n                    return;\r\n                App.Current.Resources = new WhiteTheme();\r\n                App.AppTheme = \"light\";\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
This code applies the current theme if it has changed when the view is displayed. This makes sure the app starts in the right mode. Then any time iOS notifies the app that traits have changed, such as UIUserInterfaceStyle<\/a>, the code checks that the change is different than the styles currently being displayed as tracked by AppTheme, a simple variable for tracking this.<\/p>\n
In the future, Xamarin.Forms will support this more directly (read the proposal<\/a>), but as you can see it’s very little code to update your existing Xamarin.Forms code to adopt these new features of iOS 13.<\/p>\n
\"Xamarin.Forms<\/p>\n
Xappy on GitHub: https:\/\/github.com\/davidortinau\/Xappy\/tree\/feature\/dark13\/<\/a><\/p>\n
Get Started with iOS 13 Preview<\/h2>\n
Since early July<\/a> we have been shipping updates as Apple releases new Xcode 11 betas. The Xcode beta can be installed side-by-side with a stable version of Xcode. You can always return to the stable release channel in order to use your original production environment.<\/p>\n
Important note: this preview requires a Mac running macOS 10.14.4 (Mojave) or newer! macOS 10.15 (Catalina) is supported in this release. Although you may need to take additional steps<\/a> to install the preview.<\/p>\n
Installation<\/h3>\n
To get started:<\/p>\n
    \n
  1. Download and install the Xcode 11 beta from the Apple Developer Portal<\/a>.<\/li>\n
  2. In Visual Studio for Mac, select Visual Studio > Check for Updates, select the Xcode 11 Previews channel, and install the available updates.<\/li>\n
  3. In Visual Studio for Mac, select Visual Studio > Preferences > Projects > SDK Locations > Apple and select Xcode-beta.app.<\/li>\n
  4. (Optional \u2013 Visual Studio 2019 only) Download and install the Xcode 11 preview support VSIX<\/a>.<\/li>\n<\/ol>\n
    That\u2019s it! Begin building your apps against Xcode 11 and utilize the available iOS 13 APIs within your Xamarin apps. Detailed instructions can be found on the Xamarin Documentation Portal<\/a>.<\/p>\n
    Update (September 4th)<\/b>: Preview 6 of our support for Xcode 11 and iOS 13 is now available. Huge thanks for community contribution to AVKit. Read our release notes<\/a> for more information, and visit the forums to discuss<\/a>.<\/p>\n
    Share Your Experience<\/h3>\n
    We want to hear how our Xcode 11 preview support works for you! Build your application against Xcode 11 using today\u2019s preview to ensure that your app(s) continues to build using this preview. After, start integrating new APIs such as Sign in with Apple in your app(s). Our priorities are driven by your feedback. Let us know which features from Xcode 11 and iOS 13 are important to you. Complete our survey<\/a>.<\/p>\n
    Please log an issue<\/a> on GitHub with any feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Xamarin.iOS and Xamarin.Forms deliver native iOS experiences for iOS 13 Apple which introduces dark mode: A system-wide option for light and dark themes to choose themes or allow iOS to dynamically change appearance based on the environment and time of day. <\/p>\n","protected":false},"author":553,"featured_media":45185,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[303,367],"tags":[6,6254,3616,16],"class_list":["post-45181","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ios","category-xamarin-forms","tag-ios","tag-ios-13","tag-macos","tag-xamarin-forms"],"acf":[],"blog_post_summary":"
    Xamarin.iOS and Xamarin.Forms deliver native iOS experiences for iOS 13 Apple which introduces dark mode: A system-wide option for light and dark themes to choose themes or allow iOS to dynamically change appearance based on the environment and time of day. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45181","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=45181"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/45181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/45185"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=45181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=45181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=45181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}