This is connected to How do I change the Site Page grey header on SharePoint Online O365

But I want to know if it possible to change ALL site pages in a librarys header automatically- either with settings or programmatically. Reason is that I have hundreds of pages, and the grey dark header makes the title hard to read, but changing everything manually will take a lot of time.


Create Application Customizer so you could override default CSS.

Similar thread about checking page library.


The CSS to override default CSS.

const css: string = 'div[data-automation-id="titleRegionBackgroundImage"]{background-image:none !important;background-color: coral!important;}';
      if (css) {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
          let customStyle: HTMLStyleElement = document.createElement("style");
          customStyle.title = "MSCustom";
          customStyle.type = "text/css";

Sample result.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.