Can we change the background color of a modern list view

john john 946 Reputation points
2022-06-11T00:42:08.687+00:00

Inside our SharePoint online main home page >> we want to show Announcement items, so i did the following:-

1) Create a new custom list named Announcement
2) Change the list view to use the Gallery template, as follow:-

210453-image.png

3) then using the list modern web part >> i showed the above list view as follow:-

210406-image.png

but the issue is that the background for the list view is white while we need it to be light-blue,, so is there a way to do so?

Thanks

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,159 questions
SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,594 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Yanli Jiang - MSFT 23,421 Reputation points Microsoft Vendor
    2022-06-14T08:40:09.6+00:00

    Hi @john john ,
    According to my research and testing, there is no OOTB solution to achieve your requirement.
    You can use the view format to change the background color of the gallery card. But for the background color of webpart, it needs to be implemented in a developed way. There is a thread for your reference.
    Click All Items-->Tiles(Gallery)-->Format current view
    211216-06141.png

    Then choose Gallery, and check the box, then click Advanced mode.
    211158-06142.png

    Then you can see the JSON code. Go to the place marked in the picture below and change the color to what you want. For more color options, you can refer to this.
    211243-06143.png

    Change the background color to blueLight.
    211224-06144.png

    Thanks, Yanli Jiang

    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.