What is the uxp css var name for this color?

,

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