Change color of the SharePoint App Bar

LanceA 1 Reputation point
2021-05-13T10:16:46.037+00:00

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

![96371-image.png]1

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,202 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Emily Du-MSFT 39,531 Reputation points Microsoft Vendor
    2021-05-14T03:16:30.13+00:00

    @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.
    96597-1.png


    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.