SharePoint Online Modern site/pages CSS file

Question

I'm looking for some information about how the Theming and Styles work on modern sites. But I don't find what I need.

In SharePoint Online modern sites, there doesn't seems to be a CSS file which we can use to use for example in a classic site. The Themes for example which are stored as JSON at the tenant level are (that's my guess) injected in the modern pages.

Where I work we understand how to inject CSS/styles (for example with modern or classic webparts or Extensions) but we would've like to know where the CSS of the Modern Pages is so we could use it in the Classic pages we will also have.

Is there any way to access those styles beside the PoweShell commands to get the JSON schema?

Answer 1

If you want to use CSS in modern pages across the entire site collection you have to develop an applicatioin customizer and link your css e.g. in a placeholder. You can find a way how to do this on my own question/answer at stackexchange here:

SharePoint Online use custom font on a site collection with modern experience

Answer 2

Currently, CSS code is not supported in Modern UI pages of SharePoint Online.

As a workaround, you can use a Github Script web part which allows you do drop arbitrary script or html on a modern page.

Answer 3

there's no way to do this on SPO modern experience other than creating sharepoint framework solutions

there's an invoice for sharepoint to vote for this (i already voted)

https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/17290130-bring-back-script-editor-web-part-in-modern-shar

more than 300 votes since 2016, share this if you want this to happen

Improving my Answer:

there's this "react" script editor webpart created in the SPx to replicate the script editor webpart :

https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor