Exceedingly difficult to read text in boxes with errors

When using interpolation in a box, and the interpolation has errors or is otherwise incomplete, it's exceptionally difficult to read. There are two sets of dark red underline squiggles on the interpolated field, the text is a semi light pink color, and the background is a lighter pink color. Overall I have absolutely no idea what I'm looking at. Whenever I lose track of what I'm typing in the box, I constantly just delete the contents of it and start again because I literally cannot read what's going on. This gets worse with complex expressions, like what always happens with date/time. I'm not color blind, though I think someone that's red color blind would have a more difficult time with this.

Two things that could help dramatically are removing the spellcheck-style squiggles when the interpolation fails to find an object, and swap the background color and the text color, so the text color is darker and the background is lighter. Here I quickly changed the font color to something darker and it's immediately much better.

I also think removing the CodeMirror error squiggles is a better way to go, or at the least remove both the top and bottom. They don't accurately show where the error exists and add visual noise.

The examples here are clearer to read because they're much larger than normal. It's different viewing within the interface as a whole.

Hi @Rory!

Appreciate the recommendation for how to make Retool more legible. From the screenshots you've posted, it looks like you already have a way to change the text but I just want to post this custom CSS as another potential workaround for folks:

1 Like

Yes, this works perfectly and eliminates any visibility issues.

.cm-variable.cm-retool_error, .cm-undefined.cm-retool_error {
  color : #ff0000 !important

.CodeMirror-lint-mark-error.cm-retool_error {
  background-image: none !important!

Hey @Rory, we're looking into root causing this so you won't need to apply these styles. Would you happen to have a way to reproduce the squiggles showing up both above and below the text? We are fixing squiggle positioning, but we have yet to find a way to reproduce the double squiggles.