Trivia: Application Bar Icon and Color
by kirupa |  29 September 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

In the Creating a Custom Application Bar Icon article, you learned how to use Adobe Fireworks to create an icon that you can use on the buttons that live in your Application Bar. One of the few restrictions you have is that the icon must be colored white with a transparent background.

The reason has to do with making sure your Application Bar is usable under both the Dark and Light themes:

[ your icon in the light theme ]

[ your icon in the dark theme ]

Beyond just being a guideline, it is actually technically enforced as well. In this short article, let's look at how that is enforced by deliberately breaking the guideline and observing the results.

Dark Theme
I’m going to use a green icon to demonstrate the behavior using the dark theme first. By default, this is what your icon looks like:

Notice that the icon shows up in the original color, green. When you select it, your icon changes to look as follows:

Instead of having the green be inverted, the icon color displays correctly in the dark color. In the dark theme, because your surrounding areas are light, the icon needs to be dark.

Light Theme
When you go into light theme, here is what your icon looks like by default:

Notice that my icon is not green, but instead, is the same dark color as what it was when I selected it in the dark theme earlier. Now, here is the kicker. When I select this icon now, notice what it looks like:

The icon color isn’t light as you would expect, but it is instead the original icon color I had specified.

What Have We Learned?
As you can infer by now, the Application Bar Icon you use has two states – original and dark. If your original color isn’t white, then for 50% of the cases, your icon will look illegible and/or violate the design guidelines. That is why it is best that you stay with the white icon with a transparent background.


Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.

COMMENTS




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.