Recommendations for custom theming of modern SPO sites

%3CLINGO-SUB%20id%3D%22lingo-sub-1404646%22%20slang%3D%22en-US%22%3ERecommendations%20for%20custom%20theming%20of%20modern%20SPO%20sites%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1404646%22%20slang%3D%22en-US%22%3E%3CP%3EHi.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe'd%20like%20to%20adjust%20fonts%2C%20menu%20item%20styling%2C%20colors%20and%20so%20forth%20to%20match%20our%20company%20branding.%20I%20came%20across%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fpnp%2Fsp-dev-fx-extensions%2Ftree%2Fmaster%2Fsamples%2Freact-application-injectcss%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ethis%20SPFx%20project%26nbsp%3B%3C%2FA%3Ethat%20allows%20for%20uploading%20custom%20CSS%20files%20to%20SPO%2C%20which%20looks%20promising.%20Is%20this%20the%20approach%20other%20SPO%20users%20(w%2Fmodern%20sites)%20use%3F%20Have%20you%20managed%20to%20get%20the%20above%20SPFx%20project%20working%2C%20and%20custom%20CSS%20applied%20to%20your%20sites%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20possible%2C%20we'd%20like%20to%20apply%20the%20custom%20theming%20only%20to%20a%20subset%20of%20our%20sites%2C%20so%20if%20there's%20a%20way%20to%20use%20for%20example%20powershell%20to%20loop%20through%20our%20sites%20and%20apply%20a%20custom%20CSS%20we'd%20probably%20do%20that.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1404646%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdmin%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1405446%22%20slang%3D%22en-US%22%3ERe%3A%20Recommendations%20for%20custom%20theming%20of%20modern%20SPO%20sites%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1405446%22%20slang%3D%22en-US%22%3ESPO%20branding%20in%20general%20does%20not%20support%20the%20scenario%20you%20have%20described%20here...branding%20is%20going%20to%20be%20improved%20in%20the%20future%2C%20but%20no%20ETA%20and%20details%20about%20when%20and%20what%20would%20be%20supported.%20For%20now%2C%20SPFx%20is%20the%20way%20to%20go%20as%20you%20well%20mention%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1411028%22%20slang%3D%22en-US%22%3ERe%3A%20Recommendations%20for%20custom%20theming%20of%20modern%20SPO%20sites%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1411028%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3BThanks.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20see%20that%20the%20referenced%20SPFx%20project%20looks%20quite%20outdated%2C%20as%20it%20requires%20Node%20v10.%20Likely%20the%20project%20dependencies%20are%20old%20as%20well%2C%20meaning%20that%20there%20may%20be%20critical%20bugs%20I%20don't%20want%20to%20deploy%20to%20my%20production%20environment.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20other%20SPO%20admins%20have%20created%20a%20custom%20theme%20and%20could%20like%20to%20advice%20on%20which%20approach%20they%20went%20for%2C%20I'd%20appreciate%20it.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi.

 

We'd like to adjust fonts, menu item styling, colors and so forth to match our company branding. I came across this SPFx project that allows for uploading custom CSS files to SPO, which looks promising. Is this the approach other SPO users (w/modern sites) use? Have you managed to get the above SPFx project working, and custom CSS applied to your sites?

 

If possible, we'd like to apply the custom theming only to a subset of our sites, so if there's a way to use for example powershell to loop through our sites and apply a custom CSS we'd probably do that. 

2 Replies
Highlighted
SPO branding in general does not support the scenario you have described here...branding is going to be improved in the future, but no ETA and details about when and what would be supported. For now, SPFx is the way to go as you well mention
Highlighted

@Juan Carlos González Martín Thanks. 

 

I see that the referenced SPFx project looks quite outdated, as it requires Node v10. Likely the project dependencies are old as well, meaning that there may be critical bugs I don't want to deploy to my production environment. 

 

If other SPO admins have created a custom theme and could like to advice on which approach they went for, I'd appreciate it.