Detecting the Theme in Windows Phone 7
by kirupa |  13 September 2010

  Have questions? Discuss this Windows Phone 7 tutorial with others on the forums.

As you probably know, users can change their theme in Windows Phone 7 to be either Dark or Light. This choice has the effect of making your applications look drastically different depending on which theme was chosen. Don't let this scare you though.

When designing your application, as long as you don't go out of your way to override the default brushes, you do not have to think a whole lot about this. The system will automatically adjust your application's colors to match the colors defined by the Dark or Light theme. In other words, things just work TM.

With that said, there may be times where you want to do something special given the theme a user is in. After all, seeing only the colors change when a user switches themes seems kind of boring! Let me demonstrate what you can do.

The following video shows an example of a small application that displays a different image depending on whether you are viewing this application through the Light theme or the Dark theme:


[ the graphics were created by Daniel Cook of LostGarden fame! ]

In this article, you will learn the few lines of code that are needed to help you detect the theme at runtime. So, let's get started!

Getting Started
Make sure you have everything up and running to do Windows Phone development. You'll definitely need to use either Expression Blend or Visual Studio to follow along or to build the sample application you see above.

Approach for Detecting Themes
The approach we will be taking for detecting the theme is not particularly clever, but it works! By default, all of the colors that define your application are provided via brushes defined by the operating system itself. When you change the theme, a handful of these brushes are updated to match the new colors the theme specifies. One such brush is the PhoneBackgroundBrush.

For example, here is what the color of the PhoneBackgroundBrush is in the Light theme:

Here is the same brush in the Dark theme:

 

Notice that its color changes from a white color in the Light theme to a black color in the Dark theme.

Let's use this to our advantage. In our application, by checking the color of the PhoneBackgroundBrush brush, we can infer what theme a user has set. If this brush's color is black (#FF000000), then we know the user is in the Dark theme. If this brush's color is white (#FFFFFFFF), then we know the user is in the Light theme. Let's translate this into code!

Looking at the Code
The code for detecting the theme using the approach described in the previous section is:

private Color lightThemeBackground = Color.FromArgb(255, 255, 255, 255);
private Color darkThemeBackground = Color.FromArgb(255, 0, 0, 0);
 
public MainPage()
{
InitializeComponent();
 
DisplayState();
}
 
private void DisplayState()
{
SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;
 
if (backgroundBrush.Color == lightThemeBackground)
{
// you are in the light theme
}
else
{
// you are in the dark theme
}
}

Now that you have the code, let's look at it in greater detail to understand how it works.


The first thing I do is hard-code two variables that define the light and dark colors the PhoneBackgroundBrush brursh will have:

private Color lightThemeBackground = Color.FromArgb(255, 255, 255, 255);
private Color darkThemeBackground = Color.FromArgb(255, 0, 0, 0);

Like I mentioned earlier, PhoneBackgroundBrush has a Color value that is #FFFFFFFF in the Light theme and #FF000000 when in the Dark theme. I am explicitly defining those colors in the Color objects lightThemeBackground and darkThemeBackground. I will use these values to compare with the actual color of the PhoneBackgroundBrush in my application.


What we need now is our application's PhoneBackgroundBrush. Since it is an application-level resource, you can extract it as follows:

SolidColorBrush backgroundBrush = Application.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush;

Notice that the key I pass in to our Resources collection is the name of the brush itself - PhoneBackgroundBrush. What gets returned is something of type SolidColorBrush, and I associate that brush with the variable called backgroundBrush.

Now that I have the current value for PhoneBackgroundBrush in my backgroundBrush object and the two color values the background brush can be (lightThemeBackground and darkThemeBackground), all that is left is to do a simple comparison:

if (backgroundBrush.Color == lightThemeBackground)
{
// you are in the light theme
}
else
{
// you are in the dark theme
}

If my backgroundBrush object's Color value is the same as the lightThemeBackground Color, then you know that our application is currently in the Light theme. If the values aren't equal where my backgroundBrush.Color value returns #FF000000 for the Dark theme, then the else portion of this if/else statement will kick in.

Conclusion
Already! You are now done with this short article. Like I mentioned earlier, the OS will take care of swapping all of the colors automatically for your application when the theme or accent color is changed. If you want to perform some custom tasks such as displaying a different starting page depending on the theme selected, the code presented here should help you out.

Below, in case you want to see a working example, you can download the source files for the small project I showcased in the video earlier:

Download Source Files

If you liked the graphics used in my example, please visit Daniel Cook's excellent blog, LostGarden.


Need Help?

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.