I’m currently experimenting with how themes affect certain things and I have noticed that the tint color is not responsive to theme color changes.
The image responds to tint color change if i put a normal color value in it. So I’m kind of leaning towards the tint not taking the them color. The “Label” objects in the screen are setup with the “–neutral-100” value for reference.
Firstly, --neutral-100 isn’t a valid/defined CSS variable that is provided as part of the standard light/dark themes (unless of course you’ve defined these yourself in your own theme). These variables go from 10-90 in steps of 10. Then there are --white and --black variables, all of which invert for the dark theme.
Secondly, to reference CSS variables you need to use var(--var-name), e.g. var(--neutral-90).
And thirdly (and perhaps pedantically), a ‘tint’ is a shade of a specific colour, e.g. a change in saturation or lightness, not hue.
Let’s just ignore all this shall we…
According to the documentation - under “Using Theme Colors”
https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes
the var(–xxx-xx) declaration is not needed like it would be if it was a style class. The --neutral-100 is also part of a built-in theme color sets according to the documentation. The pictures below demonstrate this working.
Also, I purposely set that image to be a white line drawing (aside from the blue arrow) so that i could change the color tint value dynamically, which is the same color value as text color would be. As demonstrated by the #FF000 value where I once had the “–neutral-100”. I can animate that all day long using normal binding methods for the color.
You’re right, it is there, but 0 isn’t:
Oohh, sorry I completely missed that you’re using an image library graphic, which does use a tint. I haven’t used library graphics since the first time I launched v8, where now I embed SVGs instead. I found linking to the library had strange results with the images being rasterised when using tint, and also the inability to colour and style different components. Are you able to use the Embed SVG option instead?
As an aside, I really don’t like the use of hex values in there 
HSL is so much more human-readable!
Could you make the image available for download somehow (or a similar one)? I’m interested as to why it isn’t working as you would expect and might be able to help you figure this out if this is at all a priority.
What does the page with this image look like in browser devtools? Both Chrome and Firefox represent the ‘cascade’ of styles in CSS well - you can see whether things are being applied as you expect them to be.
This is what pops up in Firefox and Edge whether I use the hex value or the --neutral-100.
<div data-component="ia.display.image" data-component-path="C.0:0" style="overflow: hidden; position: absolute; left: 0px; top: 0px; width: 1920px; height: 1000px;"><canvas style="min-height: 0px; min-width: 0px; width: 100%; height: 100%;" width="1280" height="925"></canvas></div>
The labels show up like this
<div data-component="ia.display.label" data-component-path="C.0:3" class="ia_labelComponent" style="color:var(--neutral-100); display: flex; flex-direction: column; justify-content: center; position: absolute; left: 83px; top: 500px; width: 50px; height: 32px; transform-origin: 50% 0% 0px;"><span>Label</span></div>
Okay, so my guess is that what’s happening is because we try to parse the color out before we apply it to the actual component that makes it to the page, and something about the variable syntax isn’t working there.
I made a project script to get around this for now. I just used the session.props.theme as a binding and transformed it with the script below.
def themeTintBW(value):
if "dark" in value:
return "#FFFFFF"
else:
return "#000000"
This is honestly just a workaround until the piping tool gets introduced for Perspective 
.