With SharePoint 2010, Microsoft introduced a theme engine with greater capabilities than were available in the 2007 version. But how many of you have actually used it beyond changing the colors of the default, out-of-the-box SharePoint look? If you haven’t, it’s time to look at this again, as it is a rather powerful tool and offers up a lot of potential when used correctly.

When it came out, my first reaction to the theming engine was that it was lacking, that it didn’t give a whole lot of control over what changed, and that there weren’t a lot of options for using it. It’s definitely true that the engine doesn’t allow for the level of customization that the 2007 version did, but if you think of how the themes work and what you can do with them, you can start to see a lot of the power behind the change.

Take the default look of an out-of-the-box SharePoint 2010 site. I think we can all agree that it’s pretty bland. Apply a theme to it and take note of the changes. It definitely adds a little spice to an otherwise basic-looking site. (Of course, you could argue that some of the out-of-the-box themes add a little too much spice, but that’s a topic for another day.) The colors of most of the elements of the page have changed: the header color, the navigation bar color, font colors, even the Site Actions menu has been recolored in some way. Generally speaking, the 2010 theme engine is all about color replacement (and font substitution too, though that is more subtle).

Let’s take this one step further. The same concept that recolors the bland out-of-the-box SharePoint site can be used to recolor a custom branded site too. But why would you want to do that? Say you have a carefully crafted custom design for your company’s SharePoint site. You want to maintain a consistent look across the site, but you also want to allow each department to have its own identity without having to create a completely new master page and styles for each one. This is where the theming engine can come into play nicely. What about other uses? Here are a couple other areas where SharePoint themes could come in handy: A school district could use themes to apply school colors to each individual school site, or a company with different branches could use themes to color each branch’s site differently.

As you create the CSS for the site, take note of which elements you’d like to be recolored. Maybe it’s the background of the site, or the Web Part header color. Maybe the navigation bar and quick-launch colors will differentiate the various departments. You can even use themes to recolor or tint images used in the site design to blend in with the rest of the theme if necessary. The theming engine gives you pretty granular control over the colors in a site. Custom themes can be created directly in the browser, or created using Office 2010 products and uploaded to the SharePoint 2010 site. Theme colors are chosen for several different categories, such as Accent1, Accent2, Dark1, Light1 and so on, and those categories are called in by the theme engine to recolor aspects of the page.

In addition to your standard style sheet, you will be creating a secondary style sheet that the theming engine will use to recolor the selected elements as the page is rendered. This style sheet, called themed.css, will go in the Style Library within a directory called Themable, and will need to be referenced in your master page file along with any other custom CSS files.

In the themed.css file, you will use specific comment tags that the theming engine will read, and then replace the style immediately following the tag to items on the page with the class applied. For example, your site with no theme applied could have a background color of #DDDDDD. When a theme is applied, you want that background color to change to one of your accent colors, so your CSS would look like the following:

.customBackground {

/* [ReplaceColor(themeColor:”Accent3″)] */

background-color:#DDDDDD;

}

When a theme is applied, the page element with the customBackground class will have its background color replaced with whatever color is set as Accent3. This is just a simple example, but hopefully gives you a good idea on where you could use the power of the 2010 theming engine to keep a consistent look and feel throughout your site, while at the same time being able to easily differentiate between areas of the site with the use of themes. By using SharePoint themes, you can make a big impact without a whole lot of effort.

Ryan Keller is a SharePoint branding and design consultant with SharePoint911, a Rackspace company.