Table striped color doesn’t accept theme color names

Ignition
,
1

I'm trying to change a table so that the striping is slightly easier to see. There's an unanswered post from 2020 titled Table striped color doesn’t accept css color variable. I have the same issue. If I type a color name, it works, but if I type a Built-in Theme Color (e.g. --neutral-30) it doesn't. Note that in the screenshot I have chosen a terrible color just to show the difference, not the color I'm actually trying to use.

On a related note, I am absolutely convinced that no one developing the High Performance HMI standards has ever asked anyone over the age of 40 to look at their screens. I see basically a blank page with texture, because the contrast is so low my eyes can't register anything. I'm trying to play along, but I'd like fractionally more contrast if I can get it.

Screenshot 2025-11-04 141442
Screenshot 2025-11-04 141442503×268 18.1 KB

2

Not all properties accept the theme color variables, like the xy chart, and I’m not sure why technically. If it does not accept the variable name, the next thing to try is wrapping it with var(), IE var(–error).

3

I've found that some places accept the variable names without using var but others don’t. but safest and css standard is to reference them with var

4

I learned about var earlier today, but it doesn't work in this case. Thanks, though.

5

It does for me, I just tried it.

6

So two weird things. First, I tried it earlier to no avail. Second, now it is working, but still throws up a "does not match the color for format."

image
image714×243 22.6 KB

7

You’ll get the false positive error message many times using var(). It does work though, and you can ignore the warning.

The next step is to add your own variables to custom css files, then target the table selector in the advanced stylesheet to set the default colors to whatever you want. You can search the forum on how to do this.

.ia_table__body__row--even {
    background-color: var(--table-rowsEven);
}

.ia_table__body__row--odd {
    background-color: var(--table-rowsOdd);
}
8

Aha! Here's why it didn't work for me earlier. BOTH odd and even need to have a non-default value, or else it doesn't work. Then it also had the error message, so I assumed that was why it wasn't working.

Screenshot 2025-11-04 145821
Screenshot 2025-11-04 145821559×175 13.7 KB

2 Likes
9

The next step is to add your own variables to custom css files, then target the table selector in the advanced stylesheet to set the default colors to whatever you want.

Good to know. I have so few tables it doesn’t seem like it’s worth the effort. Thanks for the help!

10

Just need to add those two rules into the advanced stylesheet, and either define those two variables or replace them with fixed colours. It would be a good way to dip your toes into overriding of ia component styling to better suit your needs.It'll come in handy the more you use and customise perspective

11

You can see that it is working in your screenshot, despite the error message