Set CSS Property per JS

Photoshop UXP Plugin API
,
1

I’m trying to set a css var for a color but it does not update:

I have tried all of these methods:

document.querySelector(":root").style.setProperty('--foreground-color', '0xFF0000');
document.querySelector("body").style.setProperty('--foreground-color', '0xFF0000');
document.documentElement.style.setProperty('--foreground-color', '0xFF0000');

other property sets such as:

document.querySelector(":root").style.setProperty('display', 'block');

work as expected.

Does anyone have any insight on this?

2

I think the way you format that HEX color is the issue:

image

3

I just tried that but it is still not setting the var.

4 
document.querySelector("body").style.color = "#FF0000";
5

That does work but I am trying to set a CSS var to represent the color not the color of an object.

It says here that they are supported:
https://developer.adobe.com/xd/uxp/uxp/reference-css/General/variables/

And they work if i define them in CSS but I want to change their values with JS.

If there is no way to work with CSS vars I guess I can fallback on setting the color directly.

6

For these variables it says:

This feature, combined with support for the prefers-color-scheme media query makes it extremely easy to create custom themes that respond to the selected theme in the host application.

I’m not sure if you can set these variables outside of @media styles like:

@media (prefers-color-scheme: dark), (prefers-color-scheme: darkest) {
//add your CSS styles here
}
7

I know you can set them in CSS I have done that and it works. But you don’t seem to be able to change them with JS.

8

Most likely related and probably confirms it doesn’t work.

Not sure, but I think you could play with your own custom props, but not default Ps CSS props

9

—foreground-color is my own prop so I guess it’s does not work

10

As far as I can tell, setProperty doesn’t seem to be working w/ CSS variables. @amandah This is something that should be updated in the docs – can you create a task for that? @pkrishna This should probably be added to our backlog to address.

In the meantime you could have a <style> tag that you modified the text content to update the CSS variables. That seems to work, whereas setting the property directly doesn’t seem to communicate all the way through to trigger a visual update.

Getting property values back is a little more challenging – some elements should work OK if you use getComputedStyle, but Spectrum UXP elements won’t always pass those through. For example, you could have a div, assign the --uxp-host-text-color value to the text color, and query it back… but this is likely asking for trouble (I think you’ll have to wait a frame before the values become stable).

In short: better to handle the colors in CSS and not use JS to read or manipulate them directly. If you need to change the value, modify the stylesheet as you would an HTML element rather than manipulating the individual rules.

All that said, it’d be good to know why you want to modify the colors via JS – what feature are you unlocking with this?

1 Like
11

I have a color swatch that I use to represent the color applied to a selected object such as a shape or text. Or if nothing is selected the foreground color selected in the document. Setting a css var seemed like a more modern way of going about this as I can just the same color on multiple items (fills, strokes, text, background-color) than setting the color directly on each item.

I can work around this however I am finding that the foreground color of the doc is not 100% the same as the color shown in the picker.

I posted about this but have not seen any response.

12

hello!
sorry to revive an old topic but I was wondering if there’s any update about this.

setProperty still does not work as of 24.2