|
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.
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.
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.
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.
Need Help?
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Cheers!
|
