SharePoint 2010 CSS Classes

 

SharePoint 2010 includes a series of CSS Classes that allow you to consume the theme colors.  This allows you to have custom built HTML content that dynamically recolors with the SharePoint theme:

The following table shows the background color CSS classes and their corresponding color on the default theme:

CSS Class	Color
ms-rteThemeBackColor-1-0	#FFFFFF
ms-rteThemeBackColor-2-0	#000000
ms-rteThemeBackColor-3-0	#F5F6F7
ms-rteThemeBackColor-4-0	#182738
ms-rteThemeBackColor-5-0	#0072BC
ms-rteThemeBackColor-6-0	#EC008C
ms-rteThemeBackColor-7-0	#00ADEE
ms-rteThemeBackColor-8-0	#FD9F08
ms-rteThemeBackColor-9-0	#36B000
ms-rteThemeBackColor-10-0	#FAE032

These match up exactly with the 10 theme colors:

There is a similar set of CSS tags to match the fore color to the theme colors.  Following the same pattern:

CSS Class	Color
ms-rteThemeForeColor-1-0	#FFFFFF
ms-rteThemeForeColor-2-0	#000000
ms-rteThemeForeColor-3-0	#F5F6F7
ms-rteThemeForeColor-4-0	#182738
ms-rteThemeForeColor-5-0	#0072BC
ms-rteThemeForeColor-6-0	#EC008C
ms-rteThemeForeColor-7-0	#00ADEE
ms-rteThemeForeColor-8-0	#FD9F08
ms-rteThemeForeColor-9-0	#36B000
ms-rteThemeForeColor-10-0	#FAE032

There is also a way to get a few shades lighter and darker of each theme color.  The image below demonstrates this for the 10th theme color:

There are also classes to change the font face:

and font size:

Another great resource for other themed CSS classes can be found here:

http://silverpointsoftware.wordpress.com/themed-css-classes/