In a previous post I talked about how sometimes when selecting text when cutting and pasting on Windows Phone, the text might not be visible because the brushes where changed potentially leading to unreadable text.
Another issue I have encountered is when dealing with images. Sometimes your design calls for adding metro style icons to your page instead of using the Application Bar which is fine, but as developers, we have to be aware that Windows Phone provides both Light and Dark backgrounds when a user customizes their Theme. This can lead to some undesirable experiences for the user.
The Wrong Way
The first way most will go about and do it is by using an image on a button. For example, lets say you have a button with an email icon on it as follows.
All looks good, but what happens when the user switches to the Light Background? Using the Device Tab in Expression Blend, we can easily switch the background color and see that the icon is no longer visible.
Switching to Light results in the following
You’ll notice the button border is still visible, but our icon is not anymore.
How to fix?
The easiest way I find to fix this is by using paths. With Expression Blend you can either create your own paths or import Adobe Illustrator or Photoshop files into your page. If you like you can create the paths manually, but that can be a little of tedious process so the importing feature comes in handy!
So if we select the ‘email icon’ available, we will get the following path in XAML which essential translates to the email icon
<Path Data="F1M372.2549,480.7969L372.2549,470.1369L380.8289,476.8239C381.0519,476.9959,
381.3179,477.0819,381.5829,477.0819C381.8469,477.0819,382.1109,476.9959,382.3329,
476.8259L391.2659,469.9019L391.2659,480.7969z M390.6919,467.2499L381.5849,474.3089L372.5359,
467.2499z M392.4859,464.8029L371.0289,464.8029C370.3559,464.8029,369.8089,465.3499,
369.8089,466.0259L369.8089,482.0199C369.8089,482.6949,370.3559,483.2439,371.0289,
483.2439L392.4859,483.2439C393.1629,483.2439,393.7119,482.6949,393.7119,
482.0199L393.7119,466.0259C393.7119,465.3499,393.1629,464.8029,392.4859,464.8029"
Fill="Black" Height="18.441" Stretch="Fill" Width="23.903" HorizontalAlignment="Right"
Grid.Row="1" UseLayoutRounding="False" VerticalAlignment="Top"/>
So now to make the path visible in either theme, you will have to set the Fill Property of the path to PhoneForegroundBrush.
Add this path as the ‘Content’ of your button instead of the image, and when switching themes, the path will visible in either Light or Dark background color as follows
Why Bother?
For me there are two reasons to bother. First one being user experience. If your images disappear because of user settings, it’s not the best experience and doesn’t make for a professional looking app. The second reason, your app may fail certification if this happens. The Windows Phone Marketplace ingestion team does look at theme awareness making sure apps adhere to themes on the device. We did fail one app once because of images disappearing (this is why I’m sharing this tip 
) so make sure you test in both Light and Dark backgrounds.
Hopefully this tip helps you, moral of the story is test your application in both the Light and Dark backgrounds to bring that right user experience and hopefully not get stung by this on marketplace cert testing.
