Windows Phone 7 – Theme Aware

Windows Phone 7 supports two basic themes each with four highlight colours. This gives the system eight possible colour-schemes. If you look at the templates supplied with the current CTP development tools you’ll see that a selection of Colours and Brushes are hard-coded into your App.xaml. This means that even if you change the system theme your app will not follow suit. You may want to test how you application works with both Light (Black text on White background) and Dark (White text on Black background) themes so here is a little trick to help out.

First I am assuming you have an application based on the WindowsPhoneListApplication template (this should hold true for the other template). You need to make a couple of changes to the list template to remove hard-coded values:-

Here you can see we set the BorderBrush of the DataTemplateBorder and the Fill of the DataTemplatePath to the static resource rather than “White”. The simplest way to override the hard coded brush resources from a single location programmatically is to add the following lines in your App.xaml.cs file:-

You can see here the only colour we have changed is foreground as the background seems to react to the system setting. Interestingly in the Dark theme the background is not black but a very dark grey, I haven’t found any explanation for this. Running the application now presents the application correctly using the Light theme, but of course the original Dark theme is broken because the text is now Black on Grey. Using knowledge of WPF I thought we should be able to use a member of the SystemColors class in System.Windows. However I quickly found that these are not implemented and all return RGB values equal to Black. There is also no system event to capture if the theme is changed. If we go to the Start menu while the application is running, access settings and change the Theme, when we return to our application it won’t have updated. Based on all the discussions of multi-tasking support I’m not sure if this scenario will be supported as it seems we will be expected to save state and exit when switching out to another application. This is not the case in the current CTP. At the moment it looks like we’ll just have to wait and see how this takes shape. Ideally the default templates will inherit the system theme with no need for extra coding so we only need to modify our app.xaml etc if we want to override the colours in our application. Some of the “hubs” which have been demonstrated use photographic backgrounds and I don’t think any of the released images show separate Light/Dark behaviour for them…