Windows Phone 7's dark/light themes, which allow the user to choose between white-on-black or black-on-white, expose default resource keys for your application to consume. However, since this support doesn't extend to declaring your own light/dark resources, I thought I'd look into a practical solution.

I had a few requirements for the implementation:

It not should require user code to select between specific resources

It should support standard resource dictionary files and not require specific naming

It should not have a runtime performance penalty

It should work in the Visual Studio "cider" designer

It should work in Expression Blend

The result is a solution that manages 4 (or 4.5, depending on how you look at it) of those 5, and involves a subclassed ResourceDictionary

namespaceThemeManagement{/// <summary>
/// Provides automatic selection of resources based on the current theme
/// </summary>
publicclassThemeResourceDictionary:ResourceDictionary{privateResourceDictionarylightResources;privateResourceDictionarydarkResources;/// <summary>
/// Gets or sets the <see cref="ResourceDictioary"/> to use when in the "light" theme
/// </summary>
publicResourceDictionaryLightResources{get{returnlightResources;}set{lightResources=value;if(!IsDarkTheme&&value!=null){MergedDictionaries.Add(value);}}}/// <summary>
/// Gets or sets the <see cref="ResourceDictioary"/> to use when in the "dark" theme
/// </summary>
publicResourceDictionaryDarkResources{get{returndarkResources;}set{darkResources=value;if(IsDarkTheme&&value!=null){MergedDictionaries.Add(value);}}}/// <summary>
/// Determines if the application is running in the dark theme
/// </summary>
privateboolIsDarkTheme{get{if(IsDesignMode){returntrue;}else{return(Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"]==Visibility.Visible;}}}/// <summary>
/// Determines if the application is being run by a design tool
/// </summary>
privateboolIsDesignMode{get{// VisualStudio sometimes returns false for DesignMode, DesignTool is our backup
returnDesignerProperties.GetIsInDesignMode(this)||DesignerProperties.IsInDesignTool;}}}}

To test it out, I will create a page that contains an Image wrapped in a Border with the intention of using resources for the ImageSource and BorderBrush, respectively:

We can also confirm that it works in Cider by switching to the design view:

However, since Cider cannot change themes, we can only see the dark theme.

Limitations

Unfortunately, this solution does not work in Expression Blend. For some reason, Blend parses the Resource BAML (compiled XAML) itself and manually supports Source and MergedDictionary attributes. Because of this, the custom ResourceDictionary code never runs and we Blend can't find the resources and you'll receive a warning when the project is opened.

The workaround is to select a theme file for design time resources (you can do so from the Blend warning dialog). I recommend choosing Light, since Cider forces us to use Dark. It is unfortunate that both themes can't be supported, though, as Blend is the one environment that supports swapping between them on the fly.