How do I render a static graphic in the dialogs?

Photoshop UXP Plugin API
1

Hello, I’m new to plugin development, and I would like to know how to go about rendering a static graphic in the dialogs. I tried using z-index and set it very high, but it still will not render. The image is there, but I can’t see it.

UPDATE: My png file displays, but my svg does not.

2

I doubt UDT has anything to do with this. You should change topic category to Ps UXP or XD UXP accordingly - will get much better chances to get an answer

3

I decided to use png files for my graphics, which are logos. What I need to do now is make them theme aware. Can graphics be theme aware?

4

I found this in the documentation in regard to my svg issue: * Not all SVG files are supported by UXP. UXP’s SVG renderer is targeted for simple icons and the like; complex SVGs may fail to render completely, or may render in unexpected ways. The SVG renderer will improve in the future. https://developer.adobe.com/photoshop/uxp/2022/uxp/known-issues/

5

It turns out that graphics cannot be theme aware, so when working with light/dark mode, you will need two versions of your graphic, or logo in my case. I have one with dark text and one with light, and I added both to my HTML, then I structured my CSS similar to this:

.logo-dark {

position: absolute;
width: 50%;
height: auto;
display: block;

}

.logo-light {

display: none;

}

Then I added a media query for my dark mode styles.

@media (prefers-color-scheme: darkest), (prefers-color-scheme: dark) {

.logo-dark {

	display: none;
}

.logo-light {

	position: absolute;
	width: 50%;
	height: auto;
	display: block;

}

}

1 Like
6

The “fill” property for svg graphics can be theme aware.

1 Like