How to Set UI Theme in v8.1 Vision Clients

Ignition
1

I’m upgrading v7.9 projects that use the Java Swing UI Manager to v8.1. The UI Manager doesn’t seem to work, which I recall someone mentioning that a while back (I can’t find that thread). How do you manage themes for vision in v8.1?

2

What exactly are you trying to change? UIManager “theming” has never been explicitly supported, it’s usually just an implementation detail of whatever the LnF we use is.

If you had set certain keys to certain colors in 7.9 you’ll have to explicitly list what you changed and there’s no guarantee an equivalent exists in the new LnF.

1 Like
3

The short answer is you don’t; I think I was probably the person who told you that a while back.

8.0+ is using a custom-skinned version of the Synthetica Look-And-Feel. For performance and other reasons, this LaF effectively renders and paints entire images on components, not single colors that can be easily controlled by UIManager properties.
So the way to ‘theme’ a Vision application would be to obtain a Synthetica theme .jar and apply it to the Vision client - except you can’t do that, because 1. you don’t have a Synthetica license and 2. you don’t have the ability to run custom code on startup (outside of, I guess, a module, but even then it’s probably going to initialize too late).

I would really strongly recommend abandoning this approach. Tell whoever needs to be told that Ignition made it impossible to customize in 8; that’s close enough to the truth.

1 Like
4

I had used the UIManager for setting the window area color of power tables where the rows returned doesn’t fill the component bounds, the table border, and scroll bar colors. I think there is another way of doing the table background color, but If I remember correctly, it leaves a light colored border about the table which is really annoying.

Edit:
Hmm, it seems that the power table viewport color, border, and grid color didn’t use the UIManager. Just the scrollbar stuff. At least in this project…

5

Here is the script I was using. I’ll just deal with what I can do with the components themselves.

def setDarkTheme():
	from java.awt import Color, Dimension
	from javax.swing import UIManager	
	from javax.swing.plaf import ColorUIResource #, FontUIResource, InsetsUIResource, DimensionUIResource	
	from javax.swing import BorderFactory, ImageIcon
	#from javax.swing import JLabel
	#from com.inductiveautomation.ignition.client.images import PathIcon
	black = ColorUIResource(0,0,0)
	white = ColorUIResource(255,255,255)
	green = ColorUIResource(0,217,0)
	blue = ColorUIResource(0,102,255)
	medDarkGrey = ColorUIResource(43,43,43)
	grey = ColorUIResource(213,213,213)
	darkGrey = ColorUIResource(23,23,23)
	
	border = BorderFactory.createLineBorder(darkGrey,2)
	
	# Scroll Bar Properties
	UIManager.put("ArrowButton.arrowColor",blue)
	UIManager.put("ArrowButton.background",darkGrey)
	UIManager.put("ScrollBar.background",darkGrey)
	UIManager.put("ScrollBar.thumbBackground",blue)
	UIManager.put("ScrollBar.thumbBorderColor",darkGrey)		
	
	# Viewport Properties	
	UIManager.put("Viewport.background",medDarkGrey)
	UIManager.put("Viewport.foreground",green)
	
	# Power Table Properties
	UIManager.put("Table.scrollPaneBorder",border)
	UIManager.put("Table.gridColor",darkGrey)
	
	# Text Areas and Fields
	UIManager.put("TextArea.background",darkGrey)
	UIManager.put("TextArea.foreground",green)
	UIManager.put("TextArea.border",border)
	
	UIManager.put("TextField.background",medDarkGrey)
	UIManager.put("TextField.inactiveBackground",medDarkGrey)
	UIManager.put("TextField.inactiveForeground",grey)
	UIManager.put("TextField.border",border)
	
	UIManager.put("FormattedTextField.background",medDarkGrey)
	UIManager.put("FormattedTextField.background",medDarkGrey)
	
	# Check Box Properties
	#cbIcon = JLabel(ImageIcon("Builtin/icons/16/check2.png"))
	#UIManager.put("CheckBox.icon",cbIcon)
	#LookAndFeel.installColors(JCheckBox, black, blue)

	# Drop Downs ( combo boxes )	
	UIManager.put("ComboBox.background",medDarkGrey)
	UIManager.put("ComboBox.foreground",green)

	# Lists
	UIManager.put("List.background",medDarkGrey)
	UIManager.put("List.foreground",green)
	
	# Editor Pane
	UIManager.put("EditorPane.border",border)
	UIManager.put("MenuBar.highlight",blue)	
	
	# Password Fields
	UIManager.put("PasswordField.background",medDarkGrey)
	UIManager.put("PasswordField.border",border)
	UIManager.put("PasswordField.foreground",green)	
	
	# Labels
	UIManager.put("Label.foreground",green)	
	UIManager.put("Label.disabledForeground",grey)
	UIManager.put("Label.disabledForeground",grey)
	
	# Toggle Buttons
	# UIManager.put("ToggleButton.background",medDarkGrey)	
	# UIManager.put("ToggleButton.background",blue)
	UIManager.put("Panel.foreground",green)
6

You might have better luck if you use regular Colors, instead of ColorUIResources. Synthetica has code to ignore ColorUIResources under the assumption they were set by a different LaF.

1 Like
7

Interesting, the power table’s background color used to be set by getting the viewport then setting its background color. In v8 you only have to setBackground() on the component itself, no need to drill down for the viewport.