# What is the uxp css var name for this color?

**URL:** <https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489>\
**Category:** UXP Plugin API\
**Tags:** uxp, css\
**Created:** [February 5, 2024, 7:07pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489 "2024-02-05T19:07:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tkmoney](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tkmoney/32/3545_2.png) [@tkmoney](https://forums.creativeclouddeveloper.com/u/tkmoney)\
**Post date:** [February 5, 2024, 7:07pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489/1 "2024-02-05T19:07:13Z")

</div>

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/](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](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/c/cd3dd4695c4164261e24b5984a7d0429c56ffda7.png)

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!

---

<div class="post-metadata">

**Author:** ![catte](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/catte/32/3569_2.png) [@catte](https://forums.creativeclouddeveloper.com/u/catte)\
**Post date:** [February 12, 2024, 6:20am UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489/2 "2024-02-12T06:20:59Z")

</div>

it probably doesn’t exist, and you [probably shouldn’t rely on it either way](https://github.com/AdobeDocs/uxp-photoshop/issues/459). 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](https://hastebin.skyra.pw/wohipewedu.js). 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](http://forums.creativeclouddeveloper.com/t/theme-awareness-for-uxp-css-and-different-states/3996/7)). once you have that, you can write your own CSS variables like this assuming you add the proper class name to `body` using JavaScript:

```css
.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.

---

<div class="post-metadata">

**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\
**Post date:** [February 13, 2024, 6:12pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489/3 "2024-02-13T18:12:22Z")

</div>

Any color can be there.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/a/aeef9d25a4e7c5e0ca885f52c6a4e55b1d5590d9.png)

So maybe asking for PS preference is good idea as well

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/d/d74ec5b6d2784633f877701526cca8f8315f3063.png)

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

---

<div class="post-metadata">

**Author:** ![tkmoney](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/tkmoney/32/3545_2.png) [@tkmoney](https://forums.creativeclouddeveloper.com/u/tkmoney)\
**Post date:** [February 13, 2024, 6:13pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489/4 "2024-02-13T18:13:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [February 13, 2024, 8:44pm UTC](https://forums.creativeclouddeveloper.com/t/what-is-the-uxp-css-var-name-for-this-color/7489/5 "2024-02-13T20:44:36Z")

</div>

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 🤣