What is the uxp css var name for this color?

Photoshop UXP Plugin API
,
1

Hello there,

I see in the docs that there are a number of css var names to use in our uxp projects that will make sure that they are theme aware (https://developer.adobe.com/photoshop/uxp/2022/guides/theme-awareness/).

I am looking to get the css var that is for this color that sits behind the canvas area in the UI:

image
image496Ă—264 10.1 KB

I have tried all the css vars in the documentation and it is non of those. This color seems to be used as the background color for input boxes as well. I have opened the UXP debug tools and tried to inspect elements and see if I could find which one it is but didn’t find anything. Does a css var exist for this color? Thanks!

2

it probably doesn’t exist, and you probably shouldn’t rely on it either way. one helpful resource i came across while developing my theme-aware plugin was UIColors.txt, a file that comes with Photoshop and describes every color used in the user interface in each of the four themes (people would use this to hack up their own ugly themes by modifying the file). here’s a copy of the file if you want it. anyway, searching for the RGB color values in your screenshot yields the key CanvasColor. this does mean that you’ll have to manage the theme switching yourself (if you need help with that, see here). once you have that, you can write your own CSS variables like this assuming you add the proper class name to body using JavaScript:

.lightest { --CanvasColor: rgb(147, 147, 147) }
.light { --CanvasColor: rgb(108, 108, 108) }
.dark { --CanvasColor: rgb(40, 40, 40) }
.darkest { --CanvasColor: rgb(25, 25, 25) }

personally i wrote myself a Tailwind plugin to automate this variable/theme color creation by sourcing the file, which is pretty neat. (if any Tailwind user is interested please hmu). you could probably do something similar through automation rather than painstakingly copying the values over like i just did; this file is valid JavaScript (nearly JSON), so you could just paste it in somewhere and use the values from there.

1 Like
3

Any color can be there.

image
image226Ă—202 3.01 KB

So maybe asking for PS preference is good idea as well

image
image796Ă—459 8 KB

Some retouchers prefer medium gray so they would better percieve luminosity of image and do better job with contrast balancing.

2 Likes
4

Thanks! This is the kind of thing I ended up doing. It does mean that the color values are hardcoded into the plugin but it seems like thats the only option at the moment.

1 Like
5

When I was a full time retoucher/master printer we painted our office walls mid -grey too. We also had no windows and only daylight balanced tubes.
Colour perception is serious business :rofl:

3 Likes