Applies To: SharePoint

I’ve been messing with Branding quite a bit lately and have been trying to find a way to keep it as simple as possible. The easiest choice is to use themes. There are several out of the box and it’s easy enough to create your set of colors using PowerPoint or ThemeBuilder. On a publishing site you can even just specify them right on the site!

But every theme I tried just didn’t look right. I finally decided that I really liked the default theme except for a color or two. Unfortunately, I couldn’t just start with the default and change a couple of colors using the simple themes engine. So I cracked open the corev4.css to see if I could find the default colors. Sure enough, you can see where the Theme Replacement comments are right next to a specified color (default when no theme).

So I started just snooping through the CSS and found some really interesting things. First, the theming engine is really powerful. Not only does it replace element colors on the fly, it can tint images (nice png gradients), and for each color it will actually use shades for various elements allowing you to only have to specify a small number of colors to get a wide palette.

For much more detail about where and how theme colors are used in the CSS check out Eric Schrader’s blog post that includes a pretty awesome Excel file: http://eschrader.com/2010/09/23/sharepoint-2010-%E2%80%93-themes-and-corev4-css-comparison-technique-for-developers/

However, the most interesting thing I found was that when you don’t use a theme (Default) you get many more colors and so the page looks much better. What I mean is that in trying to find the theme color default, I found that each one had several variations which I’ve laid out in a chart below. I expected to find (except in the case of tinting and named variations (lighter, lightest, etc.)) a single color for each theme color. Instead, most had several variations – ALL of which get replaced by a single color. This results in the default theme having a much greater depth than any theme available.

For example, in the CSS file there are even single classes that specify different defaults for the same theme replacement (Lines 2302 & 2304 below):

.ms-siteactionsmenuinner{
/* [ReplaceColor(themeColor:"Dark2")] */ border-color:#21374C;
/* [ReplaceColor(themeColor:"Dark2")] */ border-top-color:#394f63;
/* [RecolorImage(themeColor:"Dark2-Lighter",method:"Filling",includeRectangle:{x:0,y:467,width:1,height:11})] */ background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;
/* [ReplaceColor(themeColor:"Dark2")] */ background-color:#21374c;
}

Notice the background-color and the border-top-color are defaulting to different colors but both are replaced with the Dark2 theme color.

So what does this mean? Well it means that the default theme (no theme) will always look better than any theme you choose. Looking through the chart below you may even be surprised to see that certain colors are reused in the default theme but are replaced by different theme colors! (The default Hyperlink color #0072BC for instance). If you’d like to achieve the same level of depth you’ll need to create your own CSS file based on corev4.css removing the theme comments and manually specifying your colors. If you’re very serious about Branding, you’re probably already doing this, but those of us looking for a quick solution, this is pretty frustrating.

The themeing engine is very powerful and is still a huge leg up from the themeing available in SharePoint 2007, but it surprises me that they didn’t extend it further to handle all the options they themselves obviously required.

Default Theme Colors