Forum Discussion

Jamesod's avatar
Jamesod
Copper Contributor
Jul 20, 2025

SharePoint List color changes based on date

Hi all, I've been struggling for ages now to get JSON that works in SharePoint Lists.

What I'm trying to achieve is a color background to the date text

Green: 30+ days from today

Orange: within 30 days of due date

Red: overdue / past the due date

I keep getting blank white or one color working but not all, any help here would be so much appreciated

I've tried a variation of JSONs but nothing has worked as of yet.

 

Any help here much appreciated!

Lists
microsoft lists

3 Replies

  • PankajBadoni's avatar
    PankajBadoni
    Iron Contributor
    Aug 07, 2025

    I'm unable to replicate the issue on my end, but here are a few things you can try:

    • Use the browser's Developer Tools to inspect the element and verify if the value is actually present in the DOM.
    • Experiment with different text colors to ensure it's not blending into the background.
    • Try using toLocaleDateString(@currentField) to explicitly convert the date into a readable string for txtContent.
    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField < @now, '#f44336', if((Number(@currentField) - Number(@now)) <= 2592000000, '#ff9800', '#4caf50'))",
    "color": "white",
    "padding": "6px",
    "border-radius": "4px",
    "text-align": "center"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "=toLocaleDateString(@currentField)"
    }
  ]
}

     

    --------------------------------------------
    If my answer helped, I'd appreciate it if you could mark it as the solution. Thank you!

  • Jamesod's avatar
    Jamesod
    Copper Contributor
    Aug 07, 2025

    This worked nicely for one of my columns so thank you, but removed the text in another:

     

    This is a date column no time showing. Once I added formula text has dissapeared

     

  • PankajBadoni's avatar
    PankajBadoni
    Iron Contributor
    Jul 29, 2025

    Apply the below JSON in the column format settings of a date column. While there are other approaches available, this one works reliably for my project.

     

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if(@currentField < @now, '#f44336', if((Number(@currentField) - Number(@now)) <= 2592000000, '#ff9800', '#4caf50'))",
    "color": "white",
    "padding": "6px",
    "border-radius": "4px",
    "text-align": "center"
  },
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

     

     

Resources