# Changing opacity with built-in theme colors

**URL:** <https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530>\
**Category:** Ignition\
**Created:** [May 21, 2025, 8:19pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530 "2025-05-21T20:19:26Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 21, 2025, 8:19pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/1 "2025-05-21T20:19:26Z")

</div>

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.

- Setting opacity (this changes the entire opacity of the cell on the table)
- Setting backgroundImage to some sort of gradient but this doesn't really affect the opacity

I'm probably missing something simple.

Thanks!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 21, 2025, 8:23pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/2 "2025-05-21T20:23:05Z")

</div>

Can you mock up a couple of examples (labels would do) and post a screengrab?

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 21, 2025, 8:33pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/3 "2025-05-21T20:33:42Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/f/3f27d982ab66ca8fc9e9f2972c70b29f06e48ec7.png)

I decided to use `var(--qual-5)` and `var(--indicator)` which are better:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d753774adfb0a8ceec1da981a52365e98becdf1.png)

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 21, 2025, 9:00pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/4 "2025-05-21T21:00:57Z")

</div>

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.

 ![Right border indicators](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba7087404a7569aac447b50fc251176f7f7a8283.png)  
Create a style class for each condition with the following settings (or whatever):

```python
{
  "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.

 ![Table cell red outline](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c2f8ebd4d17ea06a7892da36d5123ab1f9c4563.png)

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.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 21, 2025, 9:09pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/5 "2025-05-21T21:09:03Z")

</div>

What a great idea! I'll implement and update with my results.

Thanks!

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 21, 2025, 9:20pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/6 "2025-05-21T21:20:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 22, 2025, 4:32am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/7 "2025-05-22T04:32:28Z")

</div>

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

> [@hw79](#):
>
> use the hex equivalent of that color and add an opacity modifier to it like `#de1b1b` becomes `#de1b1b7f` or 50% opacity

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

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 23, 2025, 3:54pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/8 "2025-05-23T15:54:11Z")

</div>

This is where I'm currently landing with it, waiting on end user feedback:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/7/873ca711a764638b441f594d762af86dc9a6b266.png)

Trying to keep accessibility in mind and your comment to bring attention only to the failing values.

Thanks all!

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 26, 2025, 4:33pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/9 "2025-05-26T16:33:05Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 26, 2025, 10:37pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/10 "2025-05-26T22:37:09Z")

</div>

Ah, I forgot the "hsl(" at the start, I updated my op. Sorry

---

<div class="post-metadata">

**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\
**Post date:** [May 27, 2025, 3:12am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/11 "2025-05-27T03:12:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![andrew.budaiev](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andrew.budaiev/32/72921_2.png) [@andrew.budaiev](https://forum.inductiveautomation.com/u/andrew.budaiev)\
**Post date:** [May 27, 2025, 4:48am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/12 "2025-05-27T04:48:00Z")

</div>

I like the idea that he does it manually to every screenshot 🙂

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 27, 2025, 7:01am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/13 "2025-05-27T07:01:07Z")

</div>

He prints them, cut them with scissors, then rescan them.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [May 27, 2025, 8:36am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/14 "2025-05-27T08:36:12Z")

</div>

What method do you use for table cell coloring?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 27, 2025, 8:37am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/15 "2025-05-27T08:37:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [May 27, 2025, 8:47am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/16 "2025-05-27T08:47:56Z")

</div>

reprocess it with a script transform like:

```python

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

```

????

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [May 27, 2025, 8:49am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/17 "2025-05-27T08:49:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 27, 2025, 8:57am UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/18 "2025-05-27T08:57:43Z")

</div>

> [@richardNZ15](#):
>
> Out of curiosity, what do you use for your snipping tool to get that rugged bottom look?

> **[Greenshot.org - Download Greenshot for PC and Mac](https://greenshot.org/)**
>
> Greenshot allows you to make and to edit screenshots simply. The application allows to ‘capture’ window, a portion of the screen or the entire screen.

![Greenshot](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/17279492f8fcb4520e0835569b0eee62e075a5b2.gif)

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.

> **[ScreenToGif - Record your screen, edit and save as a gif or video](https://www.screentogif.com/)**
>
> Free screen recorder tool. Record, edit and save as a gif or video.

---

<div class="post-metadata">

**Author:** ![hw79](https://avatars.discourse-cdn.com/v4/letter/h/838e76/32.png) [@hw79](https://forum.inductiveautomation.com/u/hw79)\
**Post date:** [May 27, 2025, 12:18pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/19 "2025-05-27T12:18:49Z")

</div>

I use Snagit to achieve the same things that @Transistor does (except it costs more =P)

![2025-05-27_07-14-24](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/5/2546cb9032be7feab2db5d2fb4aeafd9409b4b39.gif)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 27, 2025, 4:00pm UTC](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530/20 "2025-05-27T16:00:00Z")

</div>

> [@Transistor](#):
>
> forum's image upload dialog.

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

[Next page](https://forum.inductiveautomation.com/t/changing-opacity-with-built-in-theme-colors/106530.md?page=2)