![]() ![]() Many of these have a transparent default BackgroundColor, but some do not. ![]() Then there are the controls that contain text. The default BackgroundColor for these is typically the iOS default background, but factors like Material design can change that. So if you want a Frame to have the same background color as its parent, you have to explicitly set it. However Frame, ListView, and ListView.GroupHeaderTemplate do not display their parent’s background color. BackgroundColorĪs already noted, Page defaults to White. If your app design uses white backgrounds and black text, you might be relying on some of these defaults without realizing it - that’s what happened to us. As you can see, this makes the list unreadable, and the search bar has a distractingly mismatched background. Label.TextColor in the collection’s ItemTemplate changes based on the Theme, as does the BackgroundColor of the SearchBar. Now compare how they look in Light versus Dark Mode:īecause Page is White by default, and CollectionView doesn’t override it, the whole page remains White in both. For example, let’s look at an example from a page that has some unexpected Dark Mode behavior: There is no Xamarin.Forms default for TextColor on Label, so it uses the iOS defined color. There are others, which we’ll get to later. ![]() Where things get interestingĬommon sources of Dark Mode app bugs are where there are Xamarin.Forms defaults that aren’t compatible with iOS when in Dark Mode, and times when Xamarin.Forms doesn’t obey the “nesting” principle for BackgroundColor.Īn important Xamarin.Forms default is Page, where BackgroundColor defaults to White, regardless of Light vs Dark Mode. This “nesting” principle is pretty intuitive, and generally works pretty well. The text will appear with a BackgroundColor of HotPink because the StackLayout S2 and Grid default to transparent BackgroundColor, letting the HotPink from S1 shine through. For most controls and containers, it’s transparent, letting its parent’s color through. This shouldn’t be a surprise to Xamarin.Forms developers.Įverything that takes up space on the screen has a BackgroundColor. Brief background on BackgroundColorīefore getting into details, here’s a little context about BackgroundColor and how it usually works. This means that a Xamarin.Forms app will see default behavior that doesn’t exactly match the iOS platform. Xamarin.Forms sits between your app and iOS, and Xamarin.Forms sets some colors on its own. In Light Mode, the default system background is white and text is black, and vice versa for Dark Mode (not necessarily pure white and black, but close). What does Dark Mode do?įrom a high level, switching between light and dark mode simply causes some system managed colors to change. There are other important issues, like images, but that’s for another post. We’re also focusing on issues that have to do with text. We’re only looking in detail at iOS, which has made Dark Mode opt-out. Hopefully you will find this helpful in your Dark Mode efforts as well. Thus started a journey of discovery to methodically understand how background and text colors work. Bits of the UI just weren’t responding as we expected to Dark Mode. There are some useful blog posts here and here on how to set up a framework in your app, and some very useful Microsoft documentation here.īut then we started to run into bugs, one by one. Newer versions of Xamarin.Forms makes it pretty easy to set up a good framework. We recently undertook updating an older Xamarin.Forms app to include Dark Mode support on iOS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |