Change color of the SharePoint App Bar

Question

Is there a way for me to change the color of the new App Bar? The one on the left-navigation?

]1

Answer 1

@LanceA

Here’re steps:

1.Deploy the react-application-injectcss web part.
References:
https://github.com/hugoabernier/react-application-injectcss
https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
https://tahoeninjas.blog/2018/10/29/update-inject-custom-css-on-sharepoint-modern-pages-using-spfx-application-extensions/

2.Create a custom CSS file with below codes.

.sp-appBar{  
Background:red !important;  
}  

3.Upload the CSS file as custom.css into the style library of the root site collection. (i.e.: https://<yourtenant>.sharepoint.com/Style%20Library/Forms/AllItems.aspx).

4.Navigate to your site, the custom CSS should be applied.

---

If an Answer is helpful, please click "Accept Answer" and upvote it
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.