Is there a way to change the modern page's title's font color

%3CLINGO-SUB%20id%3D%22lingo-sub-1578009%22%20slang%3D%22en-US%22%3EIs%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20font%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1578009%22%20slang%3D%22en-US%22%3E%3CP%3EI%20created%20a%20new%20modern%20page%2C%20and%20i%20am%20trying%20to%20change%20the%20font%20color%20for%20the%20page%20title%20is%20this%20possible%3F%20if%20this%20is%20not%20possible%20%2C%20then%20can%20i%20hide%20the%20page%20title%20completely%20and%20instead%20of%20this%20to%20add%20a%20text%20web%20page%20which%20acts%20as%20the%20title%20and%20control%20the%20color%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1578009%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1578045%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20font%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1578045%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F233354%22%20target%3D%22_blank%22%3E%40john%20john%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%20you%20can%20upload%20custom%20themes%20to%20SharePoint%20Online%20with%20the%20theme%20generator%20tool%20which%20you%20can%20find%20here%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%23%2Fstyles%2Fthemegenerator%3FfabricVer%3D5%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffluentui%23%2Fstyles%2Fthemegenerator%3FfabricVer%3D5%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAdmittedly%2C%20I've%20never%20tried%20changing%20the%20font%20colour%20of%20the%20page%20title%20by%20using%20this%2C%20but%20one%20of%20the%20options%20in%20the%20tool%20is%20to%20change%20the%20background%20text%2C%20so%20it%20may%20be%20possible%20this%20way.%26nbsp%3B%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20blogged%20about%20this%20on%20Practical%20365%20if%20you%20need%20some%20guidance%20on%20how%20to%20use%20the%20tool%20in%20order%20to%20see%20if%20this%20works%20for%20you.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fpractical365.com%2Fsharepoint-online%2Fhow-to-create-a-sharepoint-online-intranet-part-two%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fpractical365.com%2Fsharepoint-online%2Fhow-to-create-a-sharepoint-online-intranet-part-two%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579108%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579108%22%20slang%3D%22fr-FR%22%3EHi%2C%20you%20can%20use%20an%20application%20customizer%20with%20a%20mutation%20observe%20to%20change%20it.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579135%22%20slang%3D%22en-US%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20font%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579135%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754072%22%20target%3D%22_blank%22%3E%40Derek_Doe%3C%2FA%3E%26nbsp%3BI%20have%20to%20say%20that%20I%20didn't%20understand%20a%20word%20of%20your%20answer.%20I%20bet%20others%20didn't%20either%20so%20a%20more%20complete%20explanation%20would%20be%20very%20welcome.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23333399%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579141%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579141%22%20slang%3D%22fr-FR%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%20%2C%20you%20need%20to%20create%20a%20customr%20application%20in.react%20with%20SPFX%20%2C%20coding%20and%20after%20create%20a%20package%20to%20deploy%20in%20app%20catalog%20for%20after%20add%20it%20in%20your%20site%20collection.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.c-sharpcorner.com%2Farticle%2Fsharepoint-framework-extensions-application-customizer-overview%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.c-sharpcorner.com%2Farticle%2Fsharepoint-framework-extensions-application-customizer-overview%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dgp056PEZoRQ%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Dgp056PEZoRQ%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579145%22%20slang%3D%22en-US%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20font%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579145%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754072%22%20target%3D%22_blank%22%3E%40Derek_Doe%3C%2FA%3E%26nbsp%3Bthat%20sounds%20like%20it%20needs%20tenant%20admin%20permissions%20which%20I%20certainly%20don't%20have.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23333399%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579161%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579161%22%20slang%3D%22fr-FR%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%20you%20need%20to%20have%20these%20permissions%20to%20deploy%20this%20kind%20of%20package%2C%20you%20need%20to%20create%20a%20catalog%20apps%20at%20first%20so...%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579164%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579164%22%20slang%3D%22fr-FR%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754072%22%20target%3D%22_blank%22%3E%40Derek_Doe%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Derek_Doe_0-1597086379991.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F211486i5BE21E97D929BFFB%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Derek_Doe_0-1597086379991.png%22%20alt%3D%22Derek_Doe_0-1597086379991.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579165%22%20slang%3D%22en-US%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20font%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579165%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F754072%22%20target%3D%22_blank%22%3E%40Derek_Doe%3C%2FA%3E%26nbsp%3Bsadly%20that's%20not%20going%20to%20happen%20in%20my%20company%20of%2065%2C000%20staff%20where%20permissions%20are%20very%20segregated%20and%20although%20I%20am%20Intranet%2C%20SharePoint%20and%20Power%20Platform%20Manager%20I'm%20not%20a%20tenant%20admin.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3E%3CFONT%20size%3D%222%22%20color%3D%22%23333399%22%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FFONT%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579166%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579166%22%20slang%3D%22fr-FR%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fwww.kalmstrom.com%2FFAQ%2FTaskManager%2F0020.htm%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fwww.kalmstrom.com%2FFAQ%2FTaskManager%2F0020.htm%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1579167%22%20slang%3D%22fr-FR%22%3ERE%3A%20Is%20there%20a%20way%20to%20change%20the%20modern%20page's%20title's%20make%20color%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1579167%22%20slang%3D%22fr-FR%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3EElliott%20%40Rob%3C%2FA%3E%26nbsp%3B%20I%20understand%20...%3C%2FP%3E%3C%2FLINGO-BODY%3E
Valued Contributor

I created a new modern page, and i am trying to change the font color for the page title is this possible? if this is not possible , then can i hide the page title completely and instead of this to add a text web page which acts as the title and control its color?

10 Replies

@john john 

 

Hi, you can upload custom themes to SharePoint Online with the theme generator tool which you can find here - https://developer.microsoft.com/en-us/fluentui#/styles/themegenerator?fabricVer=5

 

Admittedly, I've never tried changing the font colour of the page title by using this, but one of the options in the tool is to change the background text, so it may be possible this way.  

 

I've blogged about this on Practical 365 if you need some guidance on how to use the tool in order to see if this works for you. 

 

https://practical365.com/sharepoint-online/how-to-create-a-sharepoint-online-intranet-part-two/

 

Hi, you can use a application customizer with a mutation observer to change it.

@Derek_Doe I have to say that I didn't understand a word of your answer. What is an application customiser? What is a mutation observe? If these are features within SharePoint Online I've never heard of them. I bet others haven't either so a more complete explanation would be very welcome.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@RobElliott , you need to create a application customizer in react.js with SPFX , coding and after create a package to  deploy in app catalog for after add it in your site collection. 

 

https://www.c-sharpcorner.com/article/sharepoint-framework-extensions-application-customizer-overvie...

 

https://www.youtube.com/watch?v=gp056PEZoRQ

In this video Andrew Connell (Voitanos) is showing how to get started with SharePoint Framework Application customizers, which provide you an option to embed...

@Derek_Doe that sounds like it needs tenant admin permissions which I certainly don't have.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@RobElliott  you dont need to have these permissions to deploy this kind of package, you need to create a apps catalog at first so ...

@Derek_Doe sadly that's not going to happen in my company of 65,000 staff where permissions are very segregated and although I am Intranet, SharePoint and Power Platform Manager I'm not a tenant admin.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User