# Find and Replace: Vision Component Colors

**URL:** <https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [March 1, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481 "2023-03-01T15:34:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![AIO](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aio/32/87549_2.png) [@AIO](https://forum.inductiveautomation.com/u/AIO)\
**Post date:** [March 1, 2023, 3:34pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/1 "2023-03-01T15:34:25Z")

</div>

Hi folks,

I'm looking at updating a project's color scheme (moving towards high performance HMI) and I would like to use Find&Replace (or some analog thereof) to swap existing color codes for their replacements. I've tried searching the RGB code as well as the Hex code and I'm not getting any hits. Am I doing something wrong, or is there a better way to approach this task?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [March 1, 2023, 3:57pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/2 "2023-03-01T15:57:48Z")

</div>

Ideally you would have the color on a binding.

You might be able to script it. But it will tricky as you will have to loop through every page and every component for that property.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 2, 2023, 2:45am UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/3 "2023-03-02T02:45:51Z")

</div>

Here is a recursive script that would probably get quite a bit of the work done on a per window basis:

> **Prototype Function**
>
> ```auto
> from java.awt import Color
> from javax.swing.plaf import ColorUIResource
> findRGB = [0, 0, 0]
> replaceRGB = [255, 255, 255]
> def colorFinder(component):
> for component in component.getComponents():
> if component.background == Color(r, g, b) or component.background == ColorUIResource(r, g, b):
> component.background = Color(newR, newG, newB)
> if component.foreground == Color(r, g, b) or component.foreground == ColorUIResource(r, g, b):
> component.foreground = Color(newR, newG, newB)
> colorFinder(component)
> r = findRGB[0]
> g = findRGB[1]
> b = findRGB[2]
> newR = replaceRGB[0]
> newG = replaceRGB[1]
> newB = replaceRGB[2]
> parentWindow = system.gui.getParentWindow(event)
> colorFinder(parentWindow)
> 
> ```

**Edit:** While the prototype function I initially developed as a solution to this problem does work, it is inefficient. Instead, use [Paul Griffith's rewrite](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/7) below.

The script finds the parent window, and then recursively loops through every subcomponent looking for the foreground and background properties. It compares those properties to the findRGB list in line three of the script, and if they match, it replaces them with a java.awt.Color defined by the replaceRGB list in line four of the script.

If looping through all the windows is needed, wrap the preceding script in the following code:

```auto
for name in system.gui.getWindowNames():
	system.nav.openWindow(name)
	#[put the above listed script here]
	system.nav.closeWindow(name)

```

If there are hundreds of windows, then consider defining a range to limit the for loop, and conduct the update in batches.

---

<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:** [March 2, 2023, 3:19am UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/4 "2023-03-02T03:19:02Z")

</div>

Addressing the issue here would be the better option, where the issue is that magic colours have presumably been used throughout the project, instead of being bound to a single source of truth. For example, colours (HEX) stored inside of a client tag(s) (individual or in datasets).

If this were the case, then this change is simple: make the few changes in the source colours, and then job done. It also means that anything new doesn't have to refer to another component to get the colours right, they're named appropriately at the source and can simply be picked. If you look at my posts in the topic below as well, if you use a dataset tag and a lookup function, you don't even have to pick a source colour - the lookup simply looks up the colour for you (although I don't have a solution for blinking colours using the dataset method at the moment - I haven't really thought much about it since we're now using Perspective). For individual colour tags, I used to use:

```auto
case({<Device Status Tag Path>}
	,'Stopped', {[Client]System/Styles/Colours/Device/Off}
	,'Running', {[Client]System/Styles/Colours/Device/On}
	,'Faulted', if({[Client]System/Util/Clock_1s}, {[Client]System/Styles/Colours/Device/Faulted}, {[Client]System/Styles/Colours/Device/Faulted_Flash})
	,'Invalid', {[Client]System/Styles/Colours/Device/INVALID}
)

```

Obviously, Perspective does this far more superiorly to Vision with its Perspective Styles, but you can at least have a basic version of this in Vision.

Have a read of this topic for more ideas:

> [@Creating dynamic colors](https://forum.inductiveautomation.com/t/creating-dynamic-colors/70146):
>
> Hello, I am working on a new project with Ignition 8.1.24 Vision. I would like to know if there is a nice way to create reusable colors for template animation. For example : I would like to make a library of symbols (motors valve, digital value, etc) I already have udts containing the necessary tags for the animation. Now, I would like to define a series of colors which I want to use on my templates so if for any reason i wanted to change a red 255,0,0 to a 240,0,0, I can do it easly and it…

---

<div class="post-metadata">

**Author:** ![AIO](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aio/32/87549_2.png) [@AIO](https://forum.inductiveautomation.com/u/AIO)\
**Post date:** [March 2, 2023, 3:58pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/5 "2023-03-02T15:58:02Z")

</div>

Thank you for the suggestion, Nick. That's the dream, were it not for being a legacy project. 🙃 Hopefully we can try to implement some similar standards when we complete this recolor.

---

<div class="post-metadata">

**Author:** ![AIO](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aio/32/87549_2.png) [@AIO](https://forum.inductiveautomation.com/u/AIO)\
**Post date:** [March 2, 2023, 3:58pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/6 "2023-03-02T15:58:58Z")

</div>

Awesome; thank you Justin. I'll give this a shot on a single window and see where we get. I appreciate the example script.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 2, 2023, 5:00pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/7 "2023-03-02T17:00:28Z")

</div>

I rewrote @justinedwards.jle's example with an eye for performance; basically avoiding a lot of unnecessary allocations of new Color objects:

```python
findColor = system.gui.color(0, 0, 0)
replaceColor = system.gui.color(255, 255, 255)

def colorFinder(component):
	for component in component.getComponents():
		if component.background.rgb == findColor.rgb
			component.background = replaceColor
		if component.foreground.rgb == findColor.rgb
			component.foreground = replaceColor
		colorFinder(component)

parentWindow = system.gui.getParentWindow(event)
colorFinder(parentWindow)

```

---

<div class="post-metadata">

**Author:** ![AIO](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aio/32/87549_2.png) [@AIO](https://forum.inductiveautomation.com/u/AIO)\
**Post date:** [March 2, 2023, 9:58pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/8 "2023-03-02T21:58:59Z")

</div>

Thank you Paul & co for all of your assistance. Looks like this will do the trick.

---

<div class="post-metadata">

**Author:** ![AIO](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/aio/32/87549_2.png) [@AIO](https://forum.inductiveautomation.com/u/AIO)\
**Post date:** [March 2, 2023, 10:30pm UTC](https://forum.inductiveautomation.com/t/find-and-replace-vision-component-colors/70481/9 "2023-03-02T22:30:07Z")

</div>

> although I don't have a solution for blinking colours using the dataset method at the moment

```auto
if({[client]System/1s}=true,
	lookup({[client]System/Styles/Colors/Styles}, 
		"screenBackground", "", "componentProperty", "color"),
	lookup({[client]System/Styles/Colors/Styles}, 
		"screenBackgroundFlash", "", "componentProperty", "color"))

```

Is there a reason not to something like this?