Different (conditional) background colors in a list - Microsoft List vs. Sharepoint Group

Allert, Patrick 0 Reputation points
2024-11-01T09:47:46.81+00:00

Hi,

I have created a Microsoft List that uses conditional row formatting to mark entries that have been changed within the last 31 days with a light blue background color.

This is the JSON for it:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalRowClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "<",
        "operands": [
          "[$Age]",
          31
        ]
      },
      "sp-css-backgroundColor-BgLightBlue sp-field-fontSizeSmall sp-css-color-BlackText",
      ""
    ]
  }
}

This works fine, as long as I view the list from within Microsoft Lists.

I have also added the List to our SharePoint Group Site, but the the background color here does not look the same. Instead, it is much darker and seemingly the "palette" of usable colors is much smaller.

I tested some other nuances by changing the 'sp-css-backgroundColor' to BgGold, BgLightBlue20 and BgLightGrey but always ended up with a much darker background color when displaying the List from the Sharepoint Group.

Does anyone know if there is some parameter in the Sharepoint Group settings that I can change to make the Group display the colors correctly, or any other way to solve this?

Thanks.

Best regards

Patrick

Microsoft 365 and Office | SharePoint | Development
{count} votes

3 answers

Sort by: Most helpful
  1. Allert, Patrick 0 Reputation points
    2024-11-01T09:50:29.5533333+00:00

    List View from within Microsoft Lists:List View from within Microsoft Lists

    List View when embedded in Sharepoint Group:

    List View when embedded in Sharepoint Group

    0 comments No comments

  2. Allert, Patrick 0 Reputation points
    2024-11-01T10:14:29.6666667+00:00

    I noticed that this isn't the best place to ask such a question and posted it over in the Tech Community.

    Feel free to delete my post here (As I can't do it myself).

    Thanks.

    0 comments No comments

  3. Xyza Xue_MSFT 30,176 Reputation points Microsoft External Staff
    2024-11-04T02:44:25.8733333+00:00

    Hi @Allert, Patrick ,

    Thank you for posting in this community. We also don't have the authority to delete threads you post. You could click the "Accept Answer" button to close this thread.

    Other than that, here are some suggestions I can give you for this case that I hope will help you:

    The issue you're experiencing with the background colors in your Microsoft List when viewed from a SharePoint Group site is likely due to differences in how SharePoint and Microsoft Lists handle CSS styles and themes. SharePoint may apply its own styles that override or alter the appearance of your custom formatting.

    Unfortunately, there isn't a specific parameter in the SharePoint Group settings that can universally adjust how colors are displayed for lists. The color palette used in SharePoint may be limited compared to Microsoft Lists, which can lead to the discrepancies you're seeing.

    To address this, you might consider the following approaches:

    1. Check SharePoint Theme Settings: Ensure that the theme applied to your SharePoint site is compatible with the colors you're trying to use. You can modify the theme settings to see if that helps.
    2. Ensure Consistency Across Platforms: Make sure that the same theme is applied across both Microsoft Lists and SharePoint Group Sites. Sometimes, inconsistencies can arise if different themes are applied to different platforms
    3. Test in Different Browsers: Sometimes, browser rendering can affect how styles are displayed. Testing in different browsers may yield different results.

    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.