Tip 7–Watch out for colours & gradients in the Application Bar!


In my haste to refresh an existing ‘broken icon’ (see Tip 2) I made a ‘bad colour decision’ on the application bar that didn’t show up until it was too late.

Here are the offending icons with the default dark theme:


and here are the same icons in the light theme:


My take is that the real culprit here is in the use of gradients (‘simple colours’, such as those used for the ‘SOS’ icon, being less of an issue).

You can also provide a separate set of icons for each of the light/dark themes and change them programmatically (which I believe to be the recommended approach).

Here is the relevant portion of text from the official “UI Design and Interaction Guide for Windows Phone 7”, which is available here

“Use the user-defined system theme colour unless there is a compelling reason to override it. Using a custom colour can affect the display quality of the button icons, create unusual  visual effects in menu animations, and negatively influence power consumption on some display types.”

2 thoughts on “Tip 7–Watch out for colours & gradients in the Application Bar!

  1. Nice tip! I thought I had read some place, MS suggests only using the white on transparent images for app bar icons? Can’t remember where I read that though, it was back in May. I’ve been avoiding this (appbar itons) for miFlashlight. But sooner or later I’ll have to venture into that territory.

    PS I saw you were posted last night! Kudos!

  2. Pingback: Getting your App published on Windows Phone Marketplace « In geeks we trust …

Leave a Reply

Your email address will not be published.