Themes and Composed Looks in SharePoint 2013

A lot has been changed in the new version of SharePoint when working with SharePoint themes. One of the biggest changes is that it no longer works with Office themes.

In SharePoint 2013 they split up all the design elements, which makes it more powerful than in the previous versions. Right now you have two different things:

1. Themes;
2. Composed Looks.

Themes

This is a library that contains the theme files (Site Settings -> Themes).

You have two different types of theme files:

1. Color Palette file (.spcolor);
2. Font Scheme file (.spfont). These two types are stored in XML format, and they have their own file extension (spcolor - spfont). A couple of theme files are already available, but you can easily create your own theme files and upload them to the Theme gallery.

Here is an example of a Color Palette file:

1
<?xml version="1.0" encoding="utf-8"?>
2
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="http://schemas.microsoft.com/sharepoint/">
3
  <s:color name="BodyText" value="444444" />
4
  <s:color name="SubtleBodyText" value="777777" />
5
  <s:color name="StrongBodyText" value="262626" />
6
  <s:color name="DisabledText" value="B1B1B1" />
7
  <s:color name="SiteTitle" value="262626" />
8
  <s:color name="WebPartHeading" value="444444" />
9
  <s:color name="ErrorText" value="A83238" />
10
  <s:color name="AccentText" value="0072C6" />
11
  ...
12
</s:colorPalette>

Here is an example of a Font Scheme file:

1
<?xml version="1.0" encoding="utf-8"?>
2
<s:fontScheme name="Xylos" previewSlot1="title" previewSlot2="body" xmlns:s="http://schemas.microsoft.com/sharepoint/">
3
  <s:fontSlots>
4
  <s:fontSlot name="title">
5
    <s:latin typeface="Verdana" />
6
    <s:ea typeface="" />
7
    <s:cs typeface="Verdana" />
8
  </s:fontSlot>
9
  <s:fontSlot name="navigation">
10
    <s:latin typeface="Verdana" />
11
    <s:ea typeface="" />
12
    <s:cs typeface="Verdana" />
13
  </s:fontSlot>
14
  <s:fontSlot name="small-heading">
15
    <s:latin typeface="Verdana" />
16
    <s:ea typeface="" />
17
    <s:cs typeface="Verdana" />
18
  </s:fontSlot>
19
  <s:fontSlot name="heading">
20
    <s:latin typeface="Verdana" />
21
    <s:ea typeface="" />
22
    <s:cs typeface="Verdana" />
23
  </s:fontSlot>
24
  <s:fontSlot name="large-heading">
25
    <s:latin typeface="Verdana" />
26
    <s:ea typeface="" />
27
    <s:cs typeface="Verdana" />
28
  </s:fontSlot>
29
  <s:fontSlot name="body">
30
    <s:latin typeface="Verdana" />
31
    <s:ea typeface="" />
32
    <s:cs typeface="Verdana" />
33
  </s:fontSlot>
34
  <s:fontSlot name="large-body">
35
    <s:latin typeface="Verdana" />
36
    <s:ea typeface="" />
37
    <s:cs typeface="Verdana" />
38
  </s:fontSlot>
39
  </s:fontSlots>
40
</s:fontScheme>

As you can see, themes are not the same anymore as in SharePoint 2010 were you could activate them. In SharePoint 2013 they created something new called the Composed Looks, which is a representation of a composed “theme”.

Composed Looks

Like I said in the beginning, you do not create themes in the Office client anymore. In SharePoint 2013 you need to compose your themes in SharePoint by creating a new composed look.

Creating a new composed look can be done under Site Settings -> Composed looks. When you create a new composed look you have the following options:

• Name: the name of your composed look;
• Master page: the master page that you want to use;
• Theme URL: the URL to your color palette;
• Image URL: the URL to your background image;
• Font Scheme URL: the URL to your font scheme;
• Display Order: this will be used to arrange your composed looks ordering. For example:

Show image

With this new approach, you have a lot more flexibility. You can create multiple composed looks for your company that each use a different master page, color palette, background, or font palette.

From the moment you created a new composed look, it will be available under **Site Settings **-> Change the look.