How to change background color of grid cells depending on its content

For now TGE does not support custom grid cell formatting. But you can use a workaround with setting custom announcement banner (See more here: Configuring an Announcement Banner). Announcement banner allows to enter any unescaped data including arbitrary javascript code within <script> tag. This code will be included as a part of each Jira page at the top section. To configure announcement banner:

go to "Configuration" -> "System"
select "Announcement Banner" in "User Interface" section
enter your HTML markup to the textarea
click "Set Banner"

Here is the script you are supposed to enter as "Announcement" to textarea:

Code

<script type="text/javascript">
(function colorifyColumnsInCustomfieldById(columnsToValuesToColoursMap, customfieldId) {
    function _getiDalko$() {
        if(!JIRA || !JIRA.iDalko) {
            return null;
        }
        //noinspection JSUnresolvedVariable
        return JIRA.iDalko.$ || JIRA.iDalko.jQuery;
    }
    var $ = _getiDalko$() || jQuery || $;
    if (!$) {
        console.error("could not find jQuery!");
        return;
    }
    if (!$.jgridi) {
        console.error("could not find the iDalko jqgrid jQuery!");
        return;
    }
    var GRID_POSTFIX = '_grid',
            gridId = customfieldId + GRID_POSTFIX;
    console.log('#colorifyColumnsInCustomfieldById: gridId=`'+ gridId +'`');
    $(function() {
        function _colorify() {
            $.each(columnsToValuesToColoursMap, function(columnName, columnValueToColourMap) {
                var ariaDescribedbySelectorPostfix = gridId + '_' + columnName;
                console.log('#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: ariaDescribedbySelectorPostfix=`'+ ariaDescribedbySelectorPostfix +'`');
                var $grids = $('div.idalko-grid-view'),
                        $cellTds = $grids.find('td[aria-describedby$="'+ columnName +'"]');
                console.log('#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: $grids.length=`'+ $grids.length +'`, $grids.selector=`'+ $grids.selector +'`');
                console.log('#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: $cellTds.length=`'+ $cellTds.length +'`');
                //noinspection FunctionWithInconsistentReturnsJS
                $cellTds
                        .map(function(idx, el) {
                            console.log("#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: $(\'div.idalko-grid-view\').find(\'td[aria-describedby$=\"\'+ ariaDescribedbySelectorPostfix +\'\"]\'): $.map el: el=`"+ el +"`");
                            if (!el) {
                                return
                            }
                            var v = $(el).text();
                            console.log("#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: $('div.idalko-grid-view').find('td[aria-describedby$=\"'+ ariaDescribedbySelectorPostfix +'\"]'): $.map el: v=`"+ v +"`");
                            return {el:el, val:v}
                        })
                        .map(function(idx, args) {
                            if (!args || !args.el || !args.val) {
                                return
                            }
                            var v = args.val,
                                    colour = columnValueToColourMap[v];
                            console.log("#colorifyColumnsInCustomfieldById: $.each columnsToValuesToColoursMap: $('div.idalko-grid-view').find('td[aria-describedby$=\"'+ ariaDescribedbySelectorPostfix +'\"]'): $.map args el/val: colour=`"+ colour +"`");
                            return {el:args.el, colour:colour}
                        })
                        .each(function(idx, args) {
                            if (!args || !args.el || !args.colour) {
                                return
                            }
                            $(args.el).css({
                                color               : args.colour,
                                'background-color'  : args.colour
                            });
                        })
            })
        }
        console.log('#colorifyColumnsInCustomfieldById: page loaded');
        setTimeout(function() {
            console.log('#colorifyColumnsInCustomfieldById: presumably, grid script was executed');
            _colorify()
        },1000);
        JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function() {
            setTimeout(function() {
                console.log('#colorifyColumnsInCustomfieldById: presumably, grid script was executed');
                _colorify();
                var $grids = $('div[id$="'+gridId+'"]');
                console.log('#colorifyColumnsInCustomfieldById: $grids.length=`'+ $grids.length +'`');
                $grids.bind('jqGridLoadComplete', function() {
                    console.log('#colorifyColumnsInCustomfieldById: jqGridLoadComplete');
                    _colorify()
                })
            } ,1000)
        });
    })
})
/** the configuration */
(
        /** columns to colours */
        {
            /** status select list labels to colours */
            'istatus':{
                'Open':'#FFFF00',  //green
                'Done':'#00FF00',  //yellow
            }
        },
        /** grid customfield ID */
        'customField_10002'
);
</script>

In the bottom part of the script you see configuration section. There you have to specify ID of TGE custom field you want to style, mapping between columns names of the grid and colours for specified column values. Columns names are the same as in grid configuration, colors are encoded as standard HTML colors (schema RGB). You can find online services which allow to generate such code for any color.

Here is how it looks for default configuration.

Of course, experienced javascript users can do a lot more styling using the same approach.