Is there a way to access the current theme colors in UXP plugins for InDesign?
I tried using background-color: var(--uxp-host-background-color); but it doesn’t seem to work in InDesign.
I don’t think the InDesign app supports those variables. Would you be fine with listening to theme changes and applying those styles dynamically?
Well, as I don’t really have information about these themes, this is too unsafe. If InDesign doesn’t give me the needed values, and I can’t solve all UI problems with the current state of UXP, I will apply my own styling, to know what I’m dealing with.
We think it’s working for us by double defining the var. For example, in our CSS we have this:
:root {
/* Declarations to share across the CSS */
--bottomOfResultsFontSize: 11px;
--debuggingBorderColor: none;
--themeAware-background-color: var(--uxp-host-background-color);
--themeAware-border-color: var(--uxp-host-border-color);
--themeAware-color: var(--uxp-h3-color);
--themeAware-contrastingColor: var(--uxp-h1-color);
--themeAware-disabled-color: var(--uxp-host-widget-hover-border-color);
--uxp-label-body-size: 14px;
}
.dialog-s-arraySelector_allContainer {
/* at the bottom of the array selector is a container where the filtered results of the array will be displayed */
border-radius: 5px;
border: 1px solid var(--themeAware-border-color);
display: flex;
flex-direction: column;
height: calc(100%-124px);
margin-top: 0.5em;
max-height: 160px;
min-height: 111px;
overflow-y: scroll;
width: 100%;
}
That second one is just the 1st class where we used one of the root vars to show you how we are accessing them with the second level of var. Maybe it isn’t as hard as we made it, but it is either working or it’s doing a mighty good job of faking it. 
JSW
Very interesting …
Thank you, for sharing your solution. Sadly, this somehow doesn’t work for me, except I misunderstood you.
:root {
--themeAware-background-color: var(--uxp-host-background-color);
--themeAware-color: var(--uxp-h3-color);
--themeAware-disabled-color: var(--uxp-host-widget-hover-border-color);
}
#colortest {
background-color: white;
margin: 50px auto;
padding: 5px;
> div {
border: 1px solid black;
width: 40px;
height: 40px;
margin: 10px;
&:nth-child(1) {
background-color: var(--themeAware-background-color);
}
&:nth-child(2) {
background-color: var(--themeAware-color);
}
&:nth-child(3) {
background-color: var(--themeAware-disabled-color);
}
}
}
This will look like this:
In the inspector the html element (root) shows the variables, but they seem to be empty.
Bummer. Sorry that didn’t work for you.
While it doesn’t work for this case, does it work for any other elements?
Jon
Very good idea. I thought i maybe works only with the widgets, and not native elements. But sadly, it didn’t work anywhere. The thing I’ve not tested is spectrum web components. Up until now I couldn’t get the webpack-workflow to run properly, and deferred it to a later point.
Here is my experiment:
:root {
--themeAware-background-color: var(--uxp-host-background-color);
--themeAware-color: var(--uxp-h3-color);
--themeAware-disabled-color: var(--uxp-host-widget-hover-border-color);
}
#tests {
background-color: black;
padding: 10px;
> * {
margin: 7px 0;
}
#test-p-color {
color: var(--themeAware-background-color);
}
#test-sp-body-color {
color: var(--themeAware-background-color);
}
#test-p-bg {
background-color: var(--themeAware-background-color);
}
#test-sp-body-bg {
background-color: var(--themeAware-background-color);
}
#test-div-bg {
background-color: var(--themeAware-background-color);
}
#test-sp-action-button-bg {
background-color: var(--themeAware-background-color);
}
#test-sp-button-bg {
background-color: var(--themeAware-background-color);
}
}
<category-content id="tests">
<p id="test-p-color">p with text-color</p>
<sp-body id="test-sp-body-color">sp-body with text-color</sp-body>
<p id="test-p-bg">p with bg-color</p>
<sp-body id="test-sp-body-bg">sp-body with bg-color</sp-body>
<div id="test-div-bg">div with bg-color</div>
<sp-action-button id="test-sp-action-button-bg">sp-action-butto with bg-color</sp-action-button>
<sp-button id="test-sp-button-bg">sp-action-butto with bg-color</sp-button>
</category-content>
(just ignore the custom ‘category-content’-tag, think of it as a div)
It tested themeAware-color as well, but did not work either.
This is the result:
