On Feb 24, 2016, Microsoft announced a new client-side theming engine for first release users. This new feature reduces the steps and time needed to apply custom themes. This speeds up development and introduces some unique use cases like client-defined theming or theming to match some dynamic event. Compare this with the old style theming engine where annotated CSS styles are compiled after using “Settings > Change the look” and remain static until the next manual theme change.
Using server-side theming:
- Put custom CSS with annotations into the /Style Library/Themable/ or /Style Library/[locale]/Themable/ folder
- Go to Site settings > Change to look > Current > Try it out and apply
- Wait a few minutes
- Done
More info here.
Using client-side theming:
- Put your custom CSS anywhere, or download it dynamically using a script (user-defined themes, anyone?)
- Create the CSS link and register it
- Done, no waiting needed!
The Microsoft announcement here appears to be dead, so see Elio’s post here on details how to check if you have client-side theming enabled and how to dynamically register your CSS. Also, see this post on three ways how to use your custom CSS with the engine.
To enable the client-side theming engine, you need to enable First Release. In O365, go to:
- Click on the Waffle icon > Admin
- Click on Go to the old admin center
- Under SERVICE SETTINGS, click on Updates
- Enable First Release for entire organization (or select for some people only)
- Wait 24-48 hours
In SharePoint Online, run the following function:
SPThemeUtils.UseClientSideTheming()
If it returns true, then client-side theming is enabled and you’re good to go!
Written By:
Softlanding
More By This Author
