Introduction
This blog post will show you how to create a Gulp task in Visual Studio 2015 intended to Apply a SharePoint theme with custom spcolor file.
Why do we need a Gulp task to Apply a SharePoint theme?
For example, if we are playing with our CSS files, changing some properties, classes, etc. and we want to see how it looks in SharePoint sites. Then, we have two options:
We are using custom themable CSS files.
We are using custom CSS (non-themable)
Let’s assume we are using themable css in our SharePoint Online project, then playing, trying, and testing CSS classes is tricky because SharePoint, OOTB is using Theming Engine to convert our CSS to Themed CSS files (stored eventually under /_catalogs/theme/Themed folder).
Let’s assume again, we are using Gulp as a task manager and we have our task to compile LESS files, optimize CSS, and upload it to SharePoint automatically (as you can see in my previous article: Gulp tasks to compile LESS, optimize and upload CSS to SharePoint.
Then here is the problem, even if we upload to SharePoint our final CSS files, the final styles will not be applied because we have the original CSS, but not the converted CSS stored in Theme library (/_catalogs/theme/Themed). That means, we need to Apply the theme using our SPColor file in order to get the converted themedcss files.
Important: that applies if you are using the old theming engine, if you are using the new theming engine then all the conversion will be done in runtime instead as a background process. You can see more infomation here: http://www.eliostruyf.com/using-new-theming-engine-sharepoint-online/.
How to create Gulp task and use ApplyTheme method?
We will use REST web services to Apply theme from Gulp task.
We will use a NPM plugin called sp-request to authenticate with SharePoint.
Important Notes
We must include in our package.json “sp-request” dev dependency: “sp-request”: “^1.1.3”
colorPaletteUrl requires the site collection relative url to work fine.