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.”