Supporting light and dark theme with dynamic background images

I'm still a bit surprised in finding applications on Windows Phone 7 that doesn't take into consideration that the user might have either the dark or light theme enabled based on personal preferences. If your app is only supposed to work in one theme, then using Jeff Wilcox tool Phone Theme Manager helps a lot (it's also available on NuGet, simply install with "install-package PhoneThemeManager"). But what if your app also want to leverage a background image that might be downloaded from the internet or specified by the user. Since images might be very light or dark this might impact the user experience with the foreground color blending into the image, but there are a couple of solutions to that as well. Here is one very simple one:

To make my point I'm using the DataBound application template and create a new clean project. When I run it, the first page is rendered as follows in dark and light theme:

Next I'm gonna use a couple of nice background images, and simply by "binging" Windows Phone Wallpapers I came across these impressive wallpapers with the Man Of Steel theme:

I downloaded these two images and added an element to the main page immediately beneath the LayoutRoot's RowDefinitions as follows:

<Image Source="/Images/Superman-Wallpaper-WP7-3.jpg" 
        Grid.RowSpan="2" 
        Height="800" 
        Width="480" 
        VerticalAlignment="Bottom"/>

Using these wallpapers when running the application with dark theme renders the following result:

And the same application with light theme:

Now you will absolutely see what the problem is, since we can't control the image (well actually in this case I can, but I didn't) we need some way to mask the image and make sure the text is clearer. The solution is to add a rectangle on top of the image and fill it with a color that enhances the foreground color, opacity can be used to strengthen or weaken the "contrast". Using the static resource PhoneBackgroundBrush as the fill color keeps the color in par with the current theme.

<Rectangle Fill="{StaticResource PhoneBackgroundBrush}"
           Opacity="0.4"
           Grid.RowSpan="2"
           Height="800"
           Width="480"/>

Now when I run the application with the dark theme, this is the results:

And the same application with light theme:

Now the text is much more readable and you still have a pretty decent experience with the background image. You can naturally play around with the opacity value (which in these cases is 40%) and see which level you find good enough.

You should however be aware of the frame rate performance impact this solution creates. When I run the application without an adjusted background image the emulator and specifically the performance indicators show that I render 46% of the pixels each frame. When I add the background image and rectangle, this increases to 136%. You are still well below the recommended maximum of 250% but still something to keep an eye on!

I hope this little trick helps in creating even better Windows Phone experiences in the future!