Specifying Colors for SharePoint Header

Question

I want to specify the colors on a SharePoint header. However, the theme generated in the Theme Generator UI arbitrarily sets the colors based on my Primary Color and Accent Color. I want to specify the exact colors that the header uses.

We will be using the Compact layout.

I'd like the top bar (<div class="root-431">) to have a background color of: #D50622

Then the sub-bar ( <div class="root-438" >) to have a background color of: #8A0416

A few notes:

• I've already made these definitions in the Theme in the Brand Center's Theme Generator UI:
  • #D50622: Primary Color
  • #8A0416: Accent Color
• I've reviewed this answer: https://learn.microsoft.com/en-us/answers/questions/749648/how-to-change-the-background-color-of-the-hub-navi; however, this change needs to propagate to all other pages
• I've reviewed this answer: https://learn.microsoft.com/en-us/answers/questions/1356334/how-do-i-change-the-color-of-the-header-bar, which recommends this support article: https://learn.microsoft.com/en-us/sharepoint/dev/solution-guidance/use-css-to-brand-pages however, I am using Sharepoint Online and it seems CSS targeting is not an option
• I may be able to use the Add-SPOTHeme to gain more theme color options. However, I still would need to know how to explicitly set the background colors for the menu.

Answer 1

Hi @Nate Gervenak，

I would recommend you to use SharePoint Framework (SPFx) Extensions to apply the css for all pages. This solution helps to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. You could deploy the extension to your page to manage your css style.

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-add-js-css-ref

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.