Apply background color to list using column formatting based on text

Question

I have a SharePoint calendar/list that I am using to track employee absences across numerous accounts. What I would like is when I'm in list view to have each row that represents a different account be highlighted in a different color.

For example, all entries for XYZ account would be highlighted in blue, all entries for ABC account highlighted in red, etc.

Answer 1

For now as Ganesh described You need to use the JSON formatting based on conditions and updating the styles of the component. As online is tagged I am guessing we should talk only about this version.

Please be aware You can modify this styles of a column -> Use column formatting to customize SharePoint - styles

so for Your needs this kind of example:

    {
       "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
       "elmType": "div",
       "txtContent": "@currentField",
       "style": {
          "background-color": "=if(@currentField == 'A', '#2BBBAD', if(@currentField == 'B', '#4285F4', if(@currentField == 'C', '#aa66cc', if(@currentField == 'D', '#bbdefb', if(@currentField == 'E', '#cddc39', '' )))))"
       }
    }

will produce this kind of result

This is all already explained in Ganesh answer. What is worth mentioning is that in the near future there will be added a UI for this kind of column and list view formatting so keep an eye for updates :). This kind of feature was already introduced in this month PnP Community Call

Please check this: https://www.youtube.com/watch?v=JCKnWl0HFiA&feature=youtu.be&t=1414

I am looking forward for this to finally show in online :)

Answer 2

Try using below JSON code:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "txtContent": "@currentField",
    "style": {
        "background-color": "=if(@currentField == 'XYZ', 'blue', if(@currentField == 'ABC', 'red', 'white'))",
    }
}

Reference: Use column formatting to customize SharePoint.

Note:

1. Using column formatting in SharePoint Online you can highlight the single column only and not complete entry.
2. Column formatting is not supported for classic experience. For classic experience you need to use Client Side Rendering.

If you to achieve the same in classic experience then check my answer given at: How to Highlight a Row on Active Status