I'd like to use built-in theming for conditional formatting on a table but the colors are so dark that the text doesn't show through very well. Is there a way to set the background opacity?
I've tried a few things with no success.
I'm probably missing something simple.
Thanks!
Can you mock up a couple of examples (labels would do) and post a screengrab?
So if the value is above a target I want it to be var(--success) else var(--error) but they're too dark and I feel like they make the text of the table unreadable.
I decided to use var(--qual-5) and var(--indicator) which are better:
But still not really what I'm looking for. I want to keep using the built in theme colors otherwise I would use the hex equivalent of that color and add an opacity modifier to it like #de1b1b becomes #de1b1b7f or 50% opacity.
I agree that they make the text unreadable. Black on red is particularly difficult. I've never seen a display like this that I thought communicated clearly.
One I've used is to create an indicator on one edge of the cell using the left or right border.
{
"classes": "",
"paddingRight": 5,
"borderBottomStyle": "none",
"borderBottomWidth": 8,
"borderLeftStyle": "none",
"borderLeftWidth": 8,
"borderRightColor": "--success",
"borderRightStyle": "solid",
"borderRightWidth": 20,
"borderTopStyle": "none",
"borderTopWidth": 8,
"textAlign": "right"
}
Another alternative is to outline the cells that need attention.
Even with your red/green table I'd leave out the green background if there are only two possible states. Have everything normal or highlighted. Simplifying further, leave everything on the neutral background and use bold to indicate a problem. Go for easy-on-the-eye, clear data and highlight only what's required.
What a great idea! I'll implement and update with my results.
Thanks!
Give us a screengrab of the finished opus!
Don't forget to right align the numbers and throw a bit of right-padding in there! (Add them into the style class.)
You could also add a 1px margin at the top or bottom of the cell to add a break between adjacent indicators.
Fwiw, you can modify variable colours using the from keyword eg
hsl(from(var(--indicator) h s l / 20%) will set the alpha channel / transparency to 20% while keeping the other values the same
Hex codes are a bit gross for humans, I'd suggest hsl instead as it's immensely easier to understand (h ranges from 0 to 359 deg where every 30deg is a different primary/secondary colour red 0 orange 30 yellow 60 etc, and s and l are pretty self explanatory) hsl is also very easy to manipulate via script
This is where I'm currently landing with it, waiting on end user feedback:
Trying to keep accessibility in mind and your comment to bring attention only to the failing values.
Thanks all!
@nminchin I couldn't get the from(var(--indicator) h s l / 20%) to work for me at all, does this go in the backgroundColor value?
Ah, I forgot the "hsl(" at the start, I updated my op. Sorry
Lovely ideas!
Out of curiosity, what do you use for your snipping tool to get that rugged bottom look?
I've been using ShareX which is pretty powerful, but not sure it can do that.
I like the idea that he does it manually to every screenshot 
He prints them, cut them with scissors, then rescan them.
What method do you use for table cell coloring?
Store the raw data in a custom prop. Then bind the table's data to that prop and reprocess it, adding styles to modify how it looks depending on whatever conditions should affect how it looks.
reprocess it with a script transform like:
styled_data = []
for row in value:
new_row = dict(row)
status = row.get("status", "")
# Determine style based on status value
if status == "OK":
cell_style = {"backgroundColor": "lightgreen", "color": "black"}
elif status == "Fail":
cell_style = {"backgroundColor": "red", "color": "white"}
elif status == "Warning":
cell_style = {"backgroundColor": "orange", "color": "black"}
else:
cell_style = {}
new_row["status"] = {
"value": status,
"style": cell_style
}
styled_data.append(new_row)
return styled_data
????
Something like that, yes. You'll have to try it for yourself to see if the syntax is correct, but that's the kind of logic you'll need to use.
The two features I use most are the torn edge and the Add Counter. The user interface is a little quirky (but OK) and one cool feature is that when you save the image the full path is put on the Clipboard so that you can past it into the forum's image upload dialog.
The animation above was done with Screen2Gif.
I use Snagit to achieve the same things that @Transistor does (except it costs more =P)
You can just paste the copied image in the clipboard into the post, rather than selecting a file name. It's a lot easier and means you don't need to save a local file