Get the visual's background color

Hi Husain,

The following objects (and their properties) are standard to the developer visual and are all applied to the visual itself rather than the iframe your visual runs in:

• General
• Title
• Background
• Lock aspect
• Border
• Shadow
• Tooltip (if you've enabled)

These properties aren't available programmatically either 😞

Regarding background, it's passed down through inheritance but is explicitly set on an element much higher up in the DOM. Here's a screenshot with the element where the background colour is being set (highlighted in blue at the top:

The highest point your code can "look upwards" through the DOM is to the iframe element, so I've annotated with a black line. The element you're trying to access in your code (options.element) is highlighted in red. As the style is inherited and not set within the boundaries of the custom visual sandbox, you can't obtain its value.

I've had a look to see if this might be possible using window.getComputedStyle() on the element, but this doesn't return anything of value, unfortunately.

You could add a feature request to make the visual's background colour value available in the visual constuctor with the team, and this might be a useful addition to the SDK.

Alternatively, you could explore options such as using mix-blend-mode: difference in your CSS, but this will only work on black backgrounds (so "dark" backgrounds are not really affected), and the effect isn't as stark as you might want either.

If you want a solution in the current ecosystem, you might have better luck on a specific web development forum as there might be further options with CSS that I'm not mature enough to know about.

Thanks for the question - it's provided me with an interesting problem to take a go at solving, but I just don't think it's possible without the values being present through the SDK.

Good luck in your search,

Daniel