# Is --uxp-host-text-color not available in React?

**URL:** <https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757>\
**Category:** Photoshop\
**Created:** [April 6, 2024, 9:21pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757 "2024-04-06T21:21:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![harmonjeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/harmonjeff/32/3689_2.png) [@harmonjeff](https://forums.creativeclouddeveloper.com/u/harmonjeff)\
**Post date:** [April 6, 2024, 9:21pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/1 "2024-04-06T21:21:14Z")

</div>

In my React plugin I have a style sheet where I am trying to make sure my border color is theme aware. Using the “–uxp-host-text-color” that is supposed to be available doesn’t seem to be found.

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

While debugging it looks like the only variables set are:

1. –uxp-host-font-size: 13px;
2. –uxp-host-font-size-smaller: 12px;
3. –uxp-host-font-size-larger: 14px;

Do I need an include or something?

---

<div class="post-metadata">

**Author:** ![sttk3](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)\
**Post date:** [April 7, 2024, 10:32am UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/2 "2024-04-07T10:32:06Z")

</div>

Tried it and actually get such a statement. However, it seems to be OK since it is reflected in the appearance, what do you think?

---

<div class="post-metadata">

**Author:** ![harmonjeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/harmonjeff/32/3689_2.png) [@harmonjeff](https://forums.creativeclouddeveloper.com/u/harmonjeff)\
**Post date:** [April 7, 2024, 5:08pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/3 "2024-04-07T17:08:39Z")

</div>

It isn’t reflected in the borders as I use it. The borders are black with a dark theme instead of the off-white.

I also tried setting my own css variable using @media queries.

```auto
:root {
  --border-color:black;
}

@media(prefers-color-scheme: dark), (prefers-color-scheme: darkest) {
  .saveFileHandling {
    --border-color: white;
  }
}

@media(prefers-color-scheme: light), (prefers-color-scheme: lightest) {
  .saveFileHandling {
    --border-color: black;
  }
}

```

The borders on the div end up black no matter my theme.

---

<div class="post-metadata">

**Author:** ![harmonjeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/harmonjeff/32/3689_2.png) [@harmonjeff](https://forums.creativeclouddeveloper.com/u/harmonjeff)\
**Post date:** [April 7, 2024, 5:16pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/4 "2024-04-07T17:16:40Z")

</div>

Actually… I take it back. It does seem like my custom CSS variable is working even though the information in the debugger seems to say otherwise:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/2/283b92c8e5f29901c3ff2077e7540a814baa4db3.jpeg)

The debugger only shows the `--border-color` for `:root` and that `var(--border-color)` evaluates to black yet the borders around the radio button group are white.

It still doesn’t work for me trying to use the `–uxp-host-text-color` CSS variable that is supposed to be there, but this makes my plugin theme aware.

---

<div class="post-metadata">

**Author:** ![sttk3](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)\
**Post date:** [April 7, 2024, 11:16pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/5 "2024-04-07T23:16:41Z")

</div>

Tried with Photoshop 25.6.0 and macOS 12.7.3. `--uxp-host-text-color` is reflected in the appearance and follows theme changes.

However, the white color is slightly different from sp-boby and other text colors in the darkest and dark themes, so even if it works fine, there may be some discomfort.

It is better to operate the variables yourself as you did, or place them under the control of the Spectrum Web Components theme.

---

<div class="post-metadata">

**Author:** ![harmonjeff](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/harmonjeff/32/3689_2.png) [@harmonjeff](https://forums.creativeclouddeveloper.com/u/harmonjeff)\
**Post date:** [April 7, 2024, 11:44pm UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/6 "2024-04-07T23:44:12Z")

</div>

How do I place them under control of the Spectrum Web Components theme?

---

<div class="post-metadata">

**Author:** ![sttk3](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)\
**Post date:** [April 8, 2024, 4:26am UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/7 "2024-04-08T04:26:04Z")

</div>

The Spectrum Web Components should be able to be used according to [this document](https://developer.adobe.com/photoshop/uxp/2022/uxp-api/reference-spectrum/swc/). This is the most difficult part.

Then make the top level of the panel sp-theme. Doing so will put sp-button, etc. under the influence of sp-theme.

You can also use CSS variables such as `--spectrum-gray-800` to use [colors](https://opensource.adobe.com/spectrum-web-components/tools/theme/#what-it's-doing) that change according to the theme. I am using Preact, so the way to write it is slightly different.

```auto
{/* place sp-theme at top level */}
<sp-theme
  theme='spectrum'
  color={colorTheme}
  scale='medium'
>
  {/* your components here */}
  <sp-button>Test</sp-button>
  
  <hr style='background-color: var(--spectrum-gray-800) ;' />
</sp-theme>

```

---

<div class="post-metadata">

**Author:** ![sttk3](https://avatars.discourse-cdn.com/v4/letter/s/958977/32.png) [@sttk3](https://forums.creativeclouddeveloper.com/u/sttk3)\
**Post date:** [April 24, 2024, 3:15am UTC](https://forums.creativeclouddeveloper.com/t/is-uxp-host-text-color-not-available-in-react/7757/8 "2024-04-24T03:15:32Z")

</div>

I made a sample to work with React. This will help you know how to use it.

> **[GitHub - sttk3/swc-uxp-react-theme: UXP plugin that uses React and Spectrum Web...](https://github.com/sttk3/swc-uxp-react-theme)**
>
> UXP plugin that uses React and Spectrum Web Components (SWC) to support the changing UI brightness in Photoshop