On
In this post I will explain how to extend your design to support multiple looks and themes , so the site admin can easily change the color theme of your custom design.

  • Before going into the steps let's define the component of a composed look 
    • Master Page
    • SPColor File (Color palette File)
    • Font File (Font Scheme)
For the Master page it's well known for everybody is working with SharePoint or even any ASP.NET applications. Therefore, I will focus only on describing the other two  elements of the Composed Look:

The Palette

The color File or the color palette contains an XML representation of a 32-color based palette the definition of the palette will be as below 


The first three properties:
  • PreviewSlot1,2 ,3 Represents the 3 colors which represents this palette file and will appear next to the composed look in the Change the look page 
Hint: you can go to the change the look page by clicking site settings->Change the look

After navigating to change the look you will find all the OOTB composed looks listed if you selected any of them for preview  you can find the three preview color appears as below

after the three properties you will find definition of 32 different color slots each will have the RGB hexadecimal representation of a color like:


   <s:color name="BodyText" value="464646" />
    <s:color name="SubtleBodyText" value="030303" />
    <s:color name="StrongBodyText" value="222222" />
    <s:color name="DisabledText" value="CE9A00" />
    <s:color name="SiteTitle" value="222222" />

The Font

The font file simply consists of font slots and each font slot contains a specific font face for each script

based on the above information, in order to create composed look we need to 
  1. Define the unique colors and fonts you are using in your custom CSS and list them 
  2. Create new SPFile by defining the colors of you palette.
  3. Update CSS files and replace all the colors by placeholders contains the color slot name, sometimes it's even better to create single themable CSS files that overrides the color used in all other custom CSS like below
  4. Upload you custom master page to SharePoint master page gallery
  5. Upload your themable CSS file to the style library/language/Themable folder
  6. If you have multilingual site you need to upload the CSS file to the appropriate folder under Style library 
  7. Create Composed Look  by navigating to site settings->Composed looks
  8. Click on Add new to create new composed look
  9. Fill in the needed information
  10. Make sure that all composed look components are checked in and published 
  11. When you navigate back to the Change the look you can find your own composed look
  12. apply composed look and see the website color theme changes as you change the composed look.
  13. Make sure that your Themable Css is selected in the site master page settings->Alternate  CSS URL
Note: Sometimes the creation process of a composed look fails to save  when you select custom master page Url, the work around is to use OOTB master page and after change the look you can set your own custom master page.