Does anyone know what the default colour code is for the background of views? Its a slight grey, I just want buttons to have a matching colour and I dont know what the # is for it.
Try #FAFAFA
1 Like
You can always use browser dev tools to find out, or consult the theme files (${ignitionInstallDirectory}/data/modules/com.inductiveautomation.perspective/themes/${theme}/variable.css).
1 Like
It is #FAFAFB
2 Likes
Thanks, this looks about right
Add a color-picker extension to your browser. It’s very handy to have.
If you aren’t already, you should use styles and classes to set the properties of all your components. And, when doing that, use the built-in style colours. See https://docs.inductiveautomation.com/display/DOC81/Perspective+Themes for the list. It’s then really easy to switch between light and dark themes, etc.
1 Like
In perspective, FAFAFA changes the motor symbol background to white. Is there an easy way to determine what the actual perspective view's background color actually is, and change it?
Update, I found #E0E0E0 seems to match it perfectly. I experimentally clicked on the background colors HSL tab and increase the L value from 84 to 88.
That is often an artifact cause by limited or non-linear dynamic range in the monitor. Particularly when the monitor's brightness or contrast aren't at default.
This is why designer's should stick to recommended web colors. (The "web-safe" colors are a bit too restrictive in my opinion, but they solve this problem.) Your #E0E0E0 is quite close to the (nearly) web-safe #DDDDDD.
Also, most photo editing tools (like the GIMP) offer an "eye-dropper" tool, to obtain the exact color from a pixel in a sample image. A screen print to clipboard, then paste in the GIMP, is a quick way to do this discovery.
There are also browser-based color-picker pluginss such as ColorZilla which can be useful for examining web pages.