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

Photoshop
1

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
image724×244 36.6 KB

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?

2

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?

3

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.

: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.

4

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
image1168×880 161 KB

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.

5

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.

6

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

7

The Spectrum Web Components should be able to be used according to this document. 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 that change according to the theme. I am using Preact, so the way to write it is slightly different.

{/* 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>
8

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