How to create and set a SharePoint 2010 Theme

Themes are a very simplistic way to make a site look more like the brand of a company. Only some colors will change, but the overall style will remain the same. But if you use it together with a custom branding solution, you will save time and effort and give your site a more polished look.

Why use themes?

Using themes will allow you to cover the styling of several elements in a site that would usually be hard to style (like the hover and active style on lists) or you wouldn’t even bother to style (like context menus). Styling these elements with colors that fit the design will create a much more put together look as an end result.

You can see which elements are altered by the theme in this blog post.

How to create a theme

Just follow these steps:

1. Open Microsoft PowerPoint 2010.
2. On the tab Design, click on Colors. A drop down will appear then click on “Create New Theme Colors…”.
3. Using the colors of your design, Choose some color shades that match the defaults that will appear on the dialog box (use dark shades where the default is dark and light where the default is light).
4. Give it a name and save it. Click “Save Current Theme” and choose a location to save it.

How to set a theme programmatically

In Visual Studio 2010 you can create a solution to deploy the theme and a feature to activate it automatically.

In a SharePoint project, create a new Module element to keep your theme file. Add the file to the module.

Change the Elements.xml file to deploy the file to the correct library:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Module Name="Themes" Url="_catalogs/theme" RootWebOnly="true">
      <File Path="Themes\MyTheme.thmx" Url="MyTheme.thmx" Type="GhostableInLibrary"  />
    </Module>
</Elements>

Now your WSP solution will deploy your theme to the to the Themes library.

If you want to activate/deactivate your theme automatically using a feature, just use the following methods in your feature event receiver.

To activate the theme:

private const string myThemeUrl = "/_catalogs/theme/MyTheme.thmx";

public override void FeatureActivated(SPFeatureReceiverProperties properties) {
 SPWeb web = (properties.Feature.Parent as SPWeb);
 
 if (web != null) {
  ApplyCustomTheme(web, myThemeUrl);
 }
}

private void ApplyCustomTheme(SPWeb web, String ThemeUrl) {
 ThmxTheme theme = ThmxTheme.Open(web.Site, ThemeUrl);
 theme.ApplyTo(web, true);
 web.Update();
}

To deactivate it:

public override void FeatureDeactivating(SPFeatureReceiverProperties properties) {
 SPWeb web = (properties.Feature.Parent as SPWeb);

 if (web != null) {
  RemoveCustomTheme(web);
 }
}

private void RemoveCustomTheme(SPWeb web) {
 ThmxTheme.RemoveThemeFromWeb(web, true);
 web.Update();
}