How to detect the dark or light theme in Windows Phone 7

If the user of the Windows Phone 7 device switches from the default dark theme to the light theme, how do you detect which one is in use? In the MSDN article Theme Resources for Windows Phone, there are two interesting resource keys that you can query. These are the PhoneDarkThemeVisibility and PhoneLightThemeVisibility keys. So based on these we can determine if we should use a dark or light background image in our application, like so:

var isLightTheme = (Visibility)Application.Current.Resources["PhoneLightThemeVisibility"];
var imageBrush = new ImageBrush();
var imageUri = new Uri(isLightTheme == Visibility.Visible ? "background-light.jpg" : "background-dark.jpg", UriKind.Relative);
imageBrush.ImageSource = new System.Windows.Media.Imaging.BitmapImage(imageUri);
MainPanorama.Background = imageBrush;

Windows Phone 7 Theme Colors

The Windows Phone 7 has two different background color modes; dark or light. In addition, there are ten accent colors to choose from.

image image

There’s currently no simple way of detecting which theme and accent color that the user has selected his or her device. However, since the colors of the current theme is injected into to applications resources, one can at least read out the various colors from there.

The background color can be determined using this piece of code:

Color backgroundColor = (Color)Application.Current.Resources["PhoneBackgroundColor"];

And in a similar fashion the foreground and accent colors can be determined like this:

Color foregroundColor = (Color)Application.Current.Resources["PhoneForegroundColor"];
Color accentColor = (Color)Application.Current.Resources["PhoneAccentColor"];

All the various resource names are described here; Theme Resources for Windows Phone.

Theme Background Color Value Foreground Color Value
Dark #FF000000 #FFFFFFFF
Light #FFFFFFFF #DE000000
Accent color Value
01-WP7-magenta-accent
#FFFF0097
02-WP7-purple-accent #FFA200FF
03-WP7-teal-accent #FF00ABA9
04-WP7-lime-accent #FF8CBF26
05-WP7-brown-accent #FFA05000
06-WP7-pink-accent #FFE671B8
07-WP7-orange-accent #FFF09609
08-WP7-blue-accent #FF1BA1E2
09-WP7-red-accent #FFE51400
10-WP7-green-accent #FF339933

NuGet packages for Mvvm Light

PLEASE NOTE: These aren’t the packages that are on the official NuGet pubished list. There is a MVVM Light NuGet package that will cause error and problems on WP7 projects (by incorrectly installing SL4 assemblies). Please contact the author of that package if you are experiencing problems with that. These ones you can download here (see below) works fine with WP7.

NuGet is an utility that helps you install and reference open source packages into your Visual Studio 2010 project. It helps you to solve the pain points  of doing the boring steps of :

  1. Browse to the home page of the open source project binaries/files.
  2. Download the latest version
  3. Right click on properties for the downloaded zip package and select un-block.
  4. Unzip to a temporary/specific folder
  5. Add reference to the assemblies on your Visual Studio project.

Imagine how easy it would be if you just could select Add Package –> MVVM Light to your new or existing project. Well, that is exactly what NuGet and this post is all about.

MVVM Light is an excellent MVVM framework toolkit developed by Silverlight MVP Laurent Bugnion.

Install NuGet

You will need to download and install the latest NuGet from the CodePlex project site: http://nuget.codeplex.com/ . Go to the Downloads page and click on the NuGet.Tools.vsix link.

NuPack download page

Download the MVVM Light NuGet packages

I have created NuGet packages for the following MVVM Light project types, which at this time of writing was version 3.0 SP1:

MVVM Light NuGetPackages

Or separately:

MVVM Light Silverlight 3

MVVM Light Silverlight 4

MVVM Light Windows Phone 7

MVVM Light WPF 3.5 SP1

MVVM Light WPF 4

 

 

 

Add a package to an existing or new project

Download any of the above packages for the targeted project type to a folder of your choice, let’s say c:\NuPackages. Bring the NuPack console up be selecting View->Other Windows->Package Manager Console. In the NuPack console, select the Manage package sources button:

Select package source button

And select the path to where you downloaded the MVVM Light NuPackages and click Add:

Add path to packages

 

Going back to the console, select the new package path in the dropdown, also make sure that you have a project selected:

Select path and project

Type in the command to add your desired MVVM Light package, in this case the Windows Phone 7 package:

Add-Package command

Hopefully, everything will work and you have added the MVVM Light dependencies in your project:

Package added successfully

Project references set

Alternatively, you can use the GUI as well, right click on the Reference node in the project and select Add Package Reference.

Add Package Reference

And select the desired package:

Select MVVM Light NuPackage

Happy MVVM Light Coding!