Styling windows 8 – 1 Colors and themes

When you start creating a Windows 8 store app, the platform will provide you with a basic useful theme. If you have no idea what you are doing when it comes to design, please stick to these themes. It’s not very elegant but at least your applications won’t be a disaster. And if you just take the time to learn about the basic navigation patterns and the silhouette it may turn out to be a decent application. But when you want to evolve and start styling your application a bit more there are a million ways to do that. In this series of posts I will try to walk you through a few ways that I have found work well in the applications we are building. I will keep adding the parts here as they get published:

Styling windows 8 – 1 Colors and themes
Styling windows 8 – 2 Text and font styles
Styling windows 8 – 3 Implicit and explicit styling
Styling windows 8 – 4 The button

The big decisions

In Windows Phone, the user was in control in deciding if the style should be dark or light (at least to some degree). In windows 8, this is completely in the hands of the designer/developer. So who are you, do you dwell among the dark creatures or do you find yourself tripping with the light and airy? At least it’s an easy main switch available that can be flipped for this design decision; the RequestedTheme switch will do the trick. For this series I’m going to the let the light side win. Just head over to the App.xaml file and add the RequestedTheme property to the Application tag, like this:

Now this changes everything, all controls, backgrounds, text styles selections, all of it with one little property, neat. The added bonus is that this will also propagate through into Blend and Visual studio designer view, wonderful.

Default colorization

So now that you have decided what theme you are going with let’s do some colorizing. I will use the colors from Jayways design guidelines as an example. But before I can even get that far I have to get myself a list of all the theme colors in Windows 8. That turned out to be a bit tricky but finally I dug ‘em out from “Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design\themeresources.xaml“.

Here you will find the colors for default (dark), high contrast and light theme. It will also hold a few basic settings when it comes to max/min sizes, borders etc. for the themes. I suggest just exchanging the ones you are looking for. Actually, there is good reason for doing this, and that is to support the High contrast themes for accessibility. Besides, I have a theory that I haven’t tested yet. I suspect that performance can be impacted if you blindly copy all brushes. If they are already set in the basic RT styles there should be no need to be parsed the brushes again.

ResourceLinking_in_Blend_smallAs always when it comes to dividing resources it’s a little bit tricky to set up. What resource should be linked, what order should the resource chain use and then there is the resource paths. As with all coding there is no right or wrong answer. Here is a setup that works good for my way of thinking:

(Actually, it never looks this simple in Blend… I modified the snapshot a bit so you get the concept.)

If we look at the code, in brushes.xaml it looks like:

And for the ThemStyle.xaml it will look like:

And for the ThemStyle.xaml it will look like:

So now you have the Resources all set for styling. Its time to start setting up the colors you want for your theme, for convenience I recommend setting up named color resources, then it’s easy to reuse the same in the brushes and it will be easier to support high contrast themes in the same file. For this example I use some of the colors in Jayways company profile, Jayway blue, two shades of green and orange. So now the start of Brushes.xaml file set the colors for Application bar and back button. Note the semi transparent blue and green:

If you poke around the resources you may notice that there are no theme style for the title text. I don’t think it was an omission, the title text is just a placeholder, normally you’d want a logo or something similar. But it’s easy to fix, we can add the brush and set it in the text style for the title. We will look into that in more detail in the next part – Fonts and texts.

Downloads of the app below:

The unstyled version

Colors and color themes

 

9 Responses to “Styling windows 8 – 1 Colors and themes”

  1. Gummy says:

    Can I change theme of selected Grid control to Light while my app theme remains dark?

    • Håkan Reis says:

      It’s not possible to set lighT/dark on just part of of your design, that’s an application wide setting. The way forward is to create a separate style for the Grid control.

  2. [...] Styling windows 8 – 1 Colors and themes Styling windows 8 – 2 Text and font styles Styling windows 8 – 3 Implicit and explicit styling Styling windows 8 – 4 The button [...]

  3. [...] different kind of graphics. So we have now reached the forth part in the Styling Windows 8 series: Styling windows 8 – 1 Colors and themesStyling windows 8 – 2 Text and font stylesStyling windows 8 – 3 Implicit and explicit [...]

  4. Thanks for this resource. The new Windows Store App dev stuff is great, but MS certainly isn’t doing a great job making it straightforward. That little RequestedTheme attribute is impossible to find.

  5. [...] Styling windows 8 – 1 Colors and themes [...]

  6. [...] Styling windows 8 – 1 Colors and themes – Håkan Reis [...]

  7. [...] in the store. … In this post I’ll share 9 key lessons I’ve learned…”Styling windows 8 – 1 Colors and themes (Håkan Reis)“When you start creating a Windows 8 store app, the platform will provide you [...]

Leave a Reply