Ui-table tickcross colour issue

[nrnoob]

I am using the ui-table node to manage a table in the dashboard.
I have added the columns in the node editor, and one of these columns has the "tickcross" format. When I pass msg.payload from another node, the row does show up, but both the tick and cross show up in the site theme colour. I was expecting tick to be in green and cross to be in red, as is shown in the node homepage (node-red-node-ui-table (node) - Node-RED) and also in the tabulator's page (Tabulator).

In my dashboard -

In my dashboard, but with Chrome's DarkReader extension turned on, it works fine -

So I suspected that the extension was messing up my dashboard, but on another machine, which does not have the DarkReader extension, the behaviour is the same as my machine with darkmode turned off i.e. all tickcrosses are in theme colours.

On my machine, on the tabulator's sample page, the tickcrosses look ok, irrespective of the DarkReader mode.

DarkReader off -

DarkReader on -

What could be the issue?

Edit:
More info to help replicate:

• Sample flow

[{"id":"37bf69c7.e00616","type":"ui_table","z":"b77ebf57.35da3","group":"62e5936d.a8dd6c","name":"","order":1,"width":0,"height":0,"columns":[{"field":"en","title":"Enabled?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"fc","title":"Function Code","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"off","title":"Offset","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"len","title":"Quantity","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"32b","title":"32Bit?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"flt","title":"Floating-point?","width":"","align":"center","formatter":"tickCross","formatterParams":{"target":"_blank"}},{"field":"decs","title":"Decimals","width":"","align":"right","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"csv","title":"Variables","width":"","align":"left","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":1,"cts":true,"x":810,"y":2880,"wires":[[]]},{"id":"aa99a4f4.b647c8","type":"ui_button","z":"b77ebf57.35da3","name":"","group":"995f73e2.448bb","order":12,"width":5,"height":1,"passthru":false,"label":"Add","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":2880,"wires":[["e14e43ab.cbe47"]]},{"id":"e14e43ab.cbe47","type":"function","z":"b77ebf57.35da3","name":"","func":"var params = {\n            \"en\":flow.get(\"qen\")||false,\n            \"fc\":flow.get(\"qfc\")||1,\n            \"off\":flow.get(\"qoff\")||0,\n            \"len\":flow.get(\"qlen\")||1,\n            \"32b\":flow.get(\"q32b\")||false,\n            \"flt\":flow.get(\"qflt\")||false,\n            \"decs\":flow.get(\"qdecs\")||0,\n            \"csv\":flow.get(\"qcsv\")||\"\",\n            };\nmsg.payload={\n    command:\"addRow\",\n    arguments: [\n        [\n            params\n        ],\n        false\n    ],\n    returnPromise: true\n}\n//var qConfigs = flow.get(\"qConfigs\", \"file\")||[];\n//qConfigs.push(params);\n//flow.set(\"qConfigs\", qConfigs,\"file\");\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":2880,"wires":[["37bf69c7.e00616"]]},{"id":"62e5936d.a8dd6c","type":"ui_group","name":"Query configuration","tab":"7b3d0e0f.7efa9","order":2,"disp":true,"width":"20","collapse":false},{"id":"995f73e2.448bb","type":"ui_group","name":"Query Configuration Entry","tab":"7b3d0e0f.7efa9","order":1,"disp":true,"width":10,"collapse":false},{"id":"7b3d0e0f.7efa9","type":"ui_tab","name":"Settings","icon":"settings","disabled":false,"hidden":false}]

• Server Version info
  

• Client machine
  

• Using Chrome v90.0 on the NR machine and the client machine

[zenofmud]

with out some more information it would be hard to guess what is happening.

1. what version of Node-RED and the dashboard are you running (you can get this from the startup log)
2. what os is the machine running NR using?
3. what os is the machine viewing the dashboard running?
4. have you tried it on other browsers?
5. can you create a small test flow showing the issue? if so please export it and attach it to a reply.

In order to make code more readable and importable it is important to surround your code with three backticks
```
like this
```

You can edit and correct your post by clicking the pencil icon.

See this post for more details - How to share code or flow json

[nrnoob]

I edited the post, I hope it's sufficient to get some ideas where to look.

[zenofmud]

and what about items 4?

As I do not have a Windows machine I'll have to bow out. Hopefully someone else will take a look at this.

[nrnoob]

I just have 2 machines with me - both Windows with Chrome v90 as I mentioned in my post.
I also have an iPhone with iOS 14.4.2 and Safari on it also has the same behaviour.

[zenofmud]

On my iPad, with the ipad's dark mode turned on this is what I see:

Note: I added a second button and function to add a row with true to see the check marks. Notice there is no coloring. Do you have a tempelate node adding any CSS?

[nrnoob]

Woah, great catch!
Yes, there is a template node which adds to the site section.
I disabled it and reloaded Node-Red, but it did not have any effect on the tickcross colours.

<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '\\White\\schneider_LIO_White_RGB.png'
        logo.height = 65;
        div1[0].style.margin = '1px auto';

        div1.append(logo);

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 1000);
    });
</script>

Edit: If you meant colouring as in 'its blue instead of the green in my image', then its because my site theme colour is set to green. I mentioned this in my first post.

[dceejay]

In the dashboard sidebar - Site tab - set

This turns off Node-RED trying to theme everything in the template so should let the original colours through.

[nrnoob]

Yep, that did it!
With ui-table I am having issues with deleting rows, I am getting "Delete Error - No matching row found" erratically. But I guess that's a topic for another thread!