Update your Windows Phone App to Support Theme Changes


If you’ve ever built a Windows Phone 7 or Windows Phone 8 application, you may have found that your app looks great when building it in Visual Studio. However, as soon as you attempt to change the theme of the application, the design would not appear correct.

One resource on MSDN that you may find useful is the article titled Theme Resources for Windows Phone. This article shows several tables that explain the built-in resource names for themes. Besides setting a brush or color within your application to one of the resource values, you may be interested in knowing the theme color (light or dark) or the foreground color chosen within the settings.

Windows Phone does not provide a resource that contains a value as to which theme is chosen. Rather, the visibility of one (or both) of the theme visibility resources must be checked. An example of this is shown below:

   1: Visibility isVisible = 
   2:    (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"];

The foreground is a bit easier. In my case, I usually obtain a brush. The reason for this is that I’m usually using this to programmatically set the background color of one or more controls to this color. Rather than obtaining the foreground brush, I’m really interested in the foreground accent brush. The reason for this is that the accent is the color choice that is made in settings. I can get this be doing the following:

   1: SolidColorBrush Foreground = 
   2:    (SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"];

After doing this once, I quickly realized that this should go into a common class library that I've begun to include on every phone project. So, I created a class called theme.cs which is available in a GitHub Gist (please feel free to submit revisions or suggestions as necessary). The complete Gist can also be copied from below:

One of the reasons you may need to know the theme is when you are deciding what logo to use. For instance, you wouldn’t want a white logo to appear on the light background. So, to see the Theme.cs in action, I would first update the App.xaml.cs file to call the static method by using Theme.Detect(). This should be done in both the Application_Launching and Application_Activated methods. Then, update each of the pages that use the logo to set the source in a manner similar to the following:

   1: Logo.Source = new BitmapImage(
   2:                  new Uri(
   3:                     Theme.CurrentTheme == Theme.ThemeColor.Dark ? 
   4:                        "/Assets/Logo-Light.png" : 
   5:                        "/Assets/Logo-Dark.png", 
   6:                        UriKind.Relative));

Another way to accomplish this would be to consistently use the same naming convention and location for assets such as logos. If this is the case, you can move this to the Theme.cs class and create a new static property with a private setter that automatically populates the bitmap.

May 30 2013 5:39 PM