How exactly are the theme colors used in the SharePoint 2010 v4 master page? If you’re creating your own color scheme, refer to the images and explanation below to understand more of how the colors are used. You’ll also find a download at the end with the SharePoint CSS files – theme comments included – so that you can search through them and pick apart which colors are used where.
More than just ten colors
SharePoint uses a set of theme colors (a .thmx file, which is the same type of file that you’d use for PowerPoint, Word, and other Office themes). These colors are used for fonts, backgrounds, and borders throughout the site. Below, I’ve posted a graphic showing the colors from the “Classic” theme.
If you dissect a themeable stylesheet, you’ll see lines of comments before the CSS for defining colors. This is what tells the theme engine what color to use – and, optionally, which variant to use. The theme colors can have additional variants (Lightest, Lighter, Medium, Darker, and Darkest — see the graphic above). Looking at the corev4.css, the “body” element uses the Dark 2 “darker” color for the default font color and the Light 1 color for the background.
body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */ color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */ background-color:#fff;
margin:0px;<br />padding:0px;
}
The default v4 colors are replaced with the classic colors when you look at the actual generated theme stylesheet.
body{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;<br />color:#002163;
background-color:#fff;<br />margin:0px;
padding:0px;
}
Besides the ten colors (Dark 1…. Accent 6) and their five variants (Darker… Lightest), you can also use themeTint and themeShade to define custom tints (lighter) or shades (darker). Below is the code for a selected navigation menu item, with a diagram to illustrate how those colors are used.
.s4-toplinks .s4-tn a.selected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */ border-color:#91cdf2;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */ border-bottom-color:#addbf7;
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */ border-top-color:#c6e5f8;
/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */ background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */ color:#003759;
padding:4px 5px;<br />margin:0px 5px;
}
Finally, the theme colors also be used to recolor .png images that are part of a themed look — that is, those images that are referenced in the stylesheet. In the navigation link example above, you can see this line of code, which takes the selbg.png image and recolors it to be white (Light 1).
/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;
Recoloring an image allows you to take a .png image and change the hue — it’s quite powerful! Here’s an example of a custom graphic, recolored using the theme color:
v4 Master Page colors
Now that you know how Theme colors relate to the stylesheet, let’s take a look at different sections of SharePoint pages (using v4.master) to see how the colors are applied. (Click screenshots to see a larger version.)
Let’s take a look at a Team Site welcome page:
As you look at the different components, here are the primary colors that are used:
- Light 1 is the main body background, while Light 2 is used for the top and left background colors.
- Dark 1 and Dark 2 are the primary colors used for text.
- Accent 1 is used for highlighting the selected menu button, the “welcome” title, and various hover effects.
- Hyperlink is used for most of the links in the body area (the brighter blue links).
Notice the bottom right “Getting Started” section, however — the four light blue links have the color hard-coded! The search box colors are also hard-coded, so changing the theme will not change those links. Below, I’ve changed the theme colors, but the Getting Started links and search box text colors have not changed.
The same main colors are used in dialog windows, as well:
If you go to a calendar page, you’ll start to see other accent colors being used. If you modify your calendar with Calendar Overlays, you can choose different colors to use for displaying the different calendars. The color dropdown corresponds with the various theme colors. In the example below, you can see the default calendar appointments use the default calendar style (a lighter version of Accent 5). However, my “personal” calendar overlaid on top uses the “Brown” color, which is actually Accent 6 (lightest).
Another place where an accent color pops up is in a picture library page. The little image preview uses Accent 3 for the border.
Some uses of colors are less intuitive than others. On the All Site Content page, the links use the darker version of Accent 1 instead of the normal hyperlink color. Who knows why? I don’t.
The search results page also has some odd combinations of colors, which you’ll want to double-check if you change the theme colors. Since the left links use Accent 1 on top of the Light 2 background, you’ll want to make sure there is enough contrast for the text to be legible.
One more page that is useful to examine is a blog page:
As you can see, generally the Accent 2 – 6 colors aren’t used all that often. Of course, you can always use them in rich-text editing content areas by changing the text or background color manually. Selecting from the Theme colors means that those colors will change with the theme.
The “Styles” and “Markup Styles” dropdowns also use theme colors — although the callout boxes are hard-coded (again – who knows why…)!
The accent colors are also used in “edit” mode. For example, hovering or selecting a web part zone changes the background and border colors.
Deep-diving into the CSS
Hopefully the diagrams above help you to get a pretty good sense of how theme colors are used. But if you are curious about a specific element, I advise that you dive into the CSS to see what’s going on.
First, download the themecolors.zip file, which includes the SharePoint CSS files grabbed off the server (you can’t view these in SharePoint Designer).
Now, use your favorite web developer tool to look at the CSS for the specific element that you’re trying to learn more about. In this example, I want to figure out what’s going on with the web part title. I like to use the Firebug extension in Firefox — first, I click the “inspect” button on the Firebug toolbar, then mouse to the web part title and click on it to select. The CSS for that element then shows up in the panel on the right.
If necessary scroll through the cascading styles to find the relevant line of code that defines the colors for that style. In this case, the .ms-WPTitle and .ms-WPTitle a selectors appear to control the text color. Make a note of the file and line number — in this case, the style is in the corev4 stylesheet at line 3425.
Now, open up the stylesheet and go to the line number to find the code.
You can now see which theme color is being used – in this case, Hyperlink.
Now that you understand how stylesheets are made themeable, you might be wondering if you can make your own themeable styles. Sounds like a good topic for a future post! 
