Posted on:
Categories: SharePoint;Office 365

​When deploying a themed CSS in SharePoint 2013, there are a lot of guides out there explaining the process. The best one I found is this article from Microsoft ​MSDN here

Recently when testing a deployment for a large client, I ran into issues where a CSS file was not getting themed by the server-side theming engine. Even after repeated attempts to kick off the engine by going to Site Settings > Change the look, my CSS was still not getting incorporated with the annotated comments. Here is my troubleshooting process and how I resolved it. 

Scenario: You want to customize colors on elements in your SharePoint site. You have a custom masterpage, some themable CSS files with annotations (e.g. h1 {/* [ReplaceColor(themeColor:"ContentAccent1")] */color:#000000; } ), and also some .spcolor files. 

  1. Ensure that you have all the publishing features turned on. ​​​Alternatively, create a new site collection using the Publishing Portal site collection template. 
  2. Put all themeable CSS in the /Style Library/Themable or /Style Library/[locale, e.g. en-us]/Themable folder.
  3. ​All themable CSS files must be checked in.
  4. ​In your custom masterpage, ensure that there is a tag pointing to the CSS file e.g. 
    <SharePoint:CssRegistration Name="<%$SPUrl:~SiteCollection/Style Library/Themable/MyCustomFile.css%>" runat="server" />
  5. Your custom masterpage in the masterpage gallary must be checked in and published. ​
  6. Your .spcolor files must be uploaded and checked in at Site Settings > Themes > 15.
  7. Go to Site Settings > Change the look. Apply the new look with the custom masterpage and choose the color scheme corresponding to the .spcolor file. Try it out then accept it. Wait for the site to process the new look.
  8. Immediately go to Site Settings > Themes, then open the folder named Themed.
    1. There must be a new folder created here (e.g. 1234CDEF or some combination of 8 hexadecimal characters). 
    2. If there is no new folder, then at least the files in one of the existing folders must have some updated files.
    3. If your CSS is themed properly, the SharePoint theming engine will put together all the styles into files with extension .themedcss, and your site page source will have references to files in this folder.
    4. If you don't see a new folder in Site Settings > Themes > Themed, or you don't see any updated files here, then there is a 99% chance that the theming engine failed without informing you! Proceed to the next steps.
  9. Revert back to the default masterpage and colors in Change the look.
  10. Delete all folders in Site Settings > Themes > Themed.
  11. Go to Site Settings > Themes​ > 15​.
    1. Rename your .spcolor file (I recommend something starting with an A or number so that it appears right at the top when selecting a color in the Change the look menu). Note that deleting and reuploading doesn't seem to work. 
    2. Try to change the look again and choose the scheme matching the renamed .spcolor file.
    3. Apply the look and review step 8.
Leave a comment below if you still have issues compiling your new look!