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
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
Light Theme When you go
into light theme, here is what your icon looks like by
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
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.