Microsoft is currently rolling out a new theming engine for SharePoint Online. The difference between this new engine and the old one is that all the theme CSS changes are applied at runtime. The old engine processed all the CSS files that could be themed and stored them in the database.
Info: more information about this functionality can be found here - updated feature: SharePoint Online theming
- Your browser loads the page;
- All the stylesheets get loaded;
What you can see in this screen shot is at the top the style block which contains all the theme CSS changes. Underneath the style block, the initial stylesheet reference can be found.
How can you check if the new theming engine is available on your site?
If you want to know if your site is currently using the new theming engine, you could use the UseClientSideTheming method in your browser console (developer tools).
Info: If the function returns false, that means that the site does not use the new client side theming engine. It could also return undefined, that means that it is not yet available on your tenant.
How can you make use of this new theming engine?
The advantage of the approach, is that your custom stylesheets which you want to use on the site do not have to pass through the theming engine anymore. With the old engine it was required to uploaded these stylesheets to SharePoint before you were going to apply a new theme to the site. With the new engine you can reference them whenever you want on the site.
Info: I will not discuss if adding stylesheets is a good approach or not, but at the moment there are not much options to choose from.
If you want to make use of this new theming engine with your custom stylesheets, you have to add a link to your stylesheet to your page like you would normally do. The important step in this process is that you give the link element an id attribute. This id will be used in the registration process and SharePoint uses it to find the location of where it needs to add the style block.
This results in the following output (when a theme is applied on the site):