Hello Sharepointers,

In this blog, we can talk about client side rendering using Javascript. In Sharepoint 2013, you can change the background color of the list using custom javascript. You can use the below script as JSLink property of the list and change the color accordingly.

<script type=”text/javascript”>

SP.SOD.executeFunc(“clienttemplates.js”, “SPClientTemplates”, function() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
OnPostRender: function(ctx) {

var statusColors = {
‘Not Assigned’ : ‘#FFF1E,
‘In Progress’ : ‘#AFD600’,
‘Completed’ : ‘#01DF4A’
};

var rows = ctx.ListData.Row;
for (var i=0;i
{
var statuscolumn = rows[i][“Status”];
var rowIds = GenerateIIDForListItem(ctx, rows[i]);
var row = document.getElementById(rowIds);
row.style.backgroundColor = statusColors[statuscolumn];
}
}
});

});

</script>

Hope the above scripts helps you. Happy SharePointing!!