So you want an icon for your button, and you want this icon to adhere to the chosen theme.
Currently the solutions I’ve seen use two icons, one for dark and another for light.
My way is to use a single icon that acts as a mask.
Let’s begin.
1. choose icon
Include the icon into your project.
Let’s take the current WP7 icons, which are provided as light/dark versions. We don’t care which you take because in the end they will be treated as masks anyway.
In this example I am going to take the dark version of the icon “appbar.feature.camera.rest.png”. I could easily have taken the light version.
Just drag the image into your project, or use the “Add Existing Item” menu to add the image.
Here is a picture of the image added to my Blend project.
2. Add Button
Drag a button onto the canvas, a button auto-magically inherits the theme of the device. So if they have a dark theme the important bits of the button will appear light, vice versa.
The below image shows a standard button on a standard phone page in blend.
The image below shows what the above standard button looks like in a running app under the two different themes (light/dark).
3. Turn image into a mask and link to a button
Set the button to use the image as a mask
Get yourself to the “OpacityMask” area in blend …
Set the “OpacityMask” to use a “TileBrush”
Set the ImageSource to the image we choose in step “appbar.feature.camera.rest.png”
What this does is turns the image into a mask, so that background colour of the button shines through this mask. 
cool huh, finally a useful use case for the “Opacity Mask” !!!!
Here is what it looks like when it is correctly setup, notice the camera image is now white as it is now treated as a mask!
Now if you look at the canvas you see that the image is indeed working as a mask, the image below shows that the text “Button” shines through the image. The outline of the camera is coming through.
4. Make the altered button theme aware
Have the full mask come through as the contrast of the background. To do this we change the background brush to use “PhoneBackgroundContrastColor” . This will guarantee that the correct theme contrast is used..
Before the change :
After the change:
Notice that the FULL image mask now shines through using the contrast to the background. That is, it is using the contrast colour to shine thru the mask. So under a light theme the contrast, dark” shines through the mask. Here’s the running app under the two different themes
Conclusion
This is the easiest approach I’ve found to using images in WP7 that honour theming. If your feeling up for it, play with the background/opacity colours and use the accent/contrast styles, you’ll be surprised with what you can do. As long as you use masks and standard styles your buttons will theme well
Silverlight and other cool things ... 
Pingback: Using an image as a mask so that WP7 theme’s are honoured | Online Advertising, Web Development & General Rantings
Thank you very much for sharing this! I’m sure this trick will save lot of time mucking around to support both themes.
Cheers,
Indyfromoz
Nice work. I never really understood the usage of Opacity Mask, but now I do understand it. Thanks.
Pingback: Utiliser et modifier les couleurs de thèmes sous Windows Phone 7 « Sebastien Mornas's Blog
Hmm, but what happened to the button border? Is there a way to retain, that, or perhapse have a rounded border?
I think you should just to save png image with rounded border.
wow thanks for sharing … I’ve learnt so much from you, i hope you keep posting awesome content 🙂
Great and simple explanation, thank you!
As one of the previous posters asked, is there a way to retain the original button border, ie. I want to see the white camera on a black background, with the white button border around the camera, and vice versa for the black.
theres 2 approaches
1. The actual image you use as a mask should have the circle as part of it
2. The style of the button has a circle in it that has it’s color bound to the contrast style color.
The second approach is probably the least invasive, and it’s easy enough to create a buttonstyle with that circle and have all your buttons use that style. Thats the approach i would take personally 🙂
Hi again,
I’ve been trying to use two images: an icon and the circle from the standard icon set for the dark theme. I set these as OpacityMask for the button, and everything is fine (as in, the themes are applied properly). Problem starts when I want to press the button and I want the inside of the circle to briefly change to the opposing color, and the icon to also change to opposing color – which is what the Application Bar buttons automatically do. But I can’t seem to get it to work – either the icon keeps disappearing, or the background won’t change to white. In one instance I managed to change the background, but it took over the whole button and showed me a white square – not good when I want to get a circle…
Now if I understand the opacity mask correctly, you can’t actually do it using just one set of icons (say, only the dark theme). Is that correct? Do you know how to make a button that is a) theme-aware b) has a circle c) changes color when pressed? I would love a code sample if you’d be so inclined.
Thank you for your help!
Awesome man! Thanks a lot!
We can also add border and inverse the color when pressed on this theme aware button. Hope it helps.
http://nirmitk26.blogspot.com/2011/02/round-button-in-windows-phone-7.html
Pingback: La vraie nature de WinRT | TechnoVeille
Pingback: » [Micropost] Cambiar el color de un logo con el Background - New forms of Code
The best revenge for the people who have insulted you is the success that you can show them later
Pingback: [Micropost] Cambiar el color de un logo con el Background | BackApp
Getting up in the morning is a sign that you can achieve the goals life better than yesterday
Kemarahan dendam dan kebencian adalah perusak rezeki anda hari ini.
Pingback: How do I add windows phone system colors to icon using expression design? - Popular Windows Phone Questions