Automatic Dark/Light Icon Support in Windows Phone 8

Question

I think this is a very common problem, but I cannot find a suitable solution for me. As you all know, WP supports a dark and a light theme. The user can change the theme and the

Answer 1

You could use vector graphics instead of bitmap icons and use a theme-aware brush to draw them.

If you want the App to respond to a switch of the theme you'll need to respond to it any way.

I added a property to the base class of my Views that returns the selected theme. That way I can use/bind to that value.

It is also possible to use a ValueConverter that turns a logical name of a resource into a name of a theme specific resource.

Edit

Have a look at this: Custom light/dark theme resources on Windows Phone 7

Answer 2

If you want the icon to function like in the actionbar, just be white (if dark theme) and black (if light theme) then you can add the image as an opacity mask to a rectangle, like this:

<Rectangle Fill="{StaticResource PhoneForegroundBrush}" Width="48" Height="48" >
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="/Images/my.icon.png" />
    </Rectangle.OpacityMask>
</Rectangle>

Where my.icon.png is a white image, like those you can choose for the actionbar.

Answer 3

You pick a White Foregrounded icon use it. It suits for both Light and Dark themes. Thats what I have been doing.

Answer 4

The Coding 4 Fun control toolkit includes a round button that mimics the application bar buttons, including updating the foreground color depending on the theme. The code is open source, so perhaps you might find an answer in there. Or, as a hack, you could use the RoundButton control, turn off the border, and not provide a Click event.

Answer 5

Detect the theme (Supporting dark and light themes gives the best solution for this, I think), and then set the image accordingly. If you do this a lot, a custom control where you can supply two image sources and the correct one gets used would be easy enough to create.

Edit: Here's another good article on this topic. New Screen Resolutions