Can we change the background color of a modern list view

Question

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:

3. then using the list modern web part >> I showed the above list view as follow:

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?

Answer 1

Unfortunately, there is No SharePoint OOTB way to change the complete background color of list view. But you can change the background color of item rows/tiles using JSON Formatting.

---

Sample JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 73,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton",
          "role": "presentation"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "style": {
          "background-color": "lightblue"
        },
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondary sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          }
        ]
      }
    ]
  }
}

In above JSON, I have added below code manually in JSON code provided in Gallery view by default (you can change the color as per your requirements):

"style": {
     "background-color": "lightblue"
},

Output: