# Theme Awareness CSS variables InDesign

**URL:** <https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287>\
**Category:** InDesign\
**Tags:** ui, uxp\
**Created:** [August 13, 2024, 8:27am UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287 "2024-08-13T08:27:48Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![roman-edv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roman-edv/32/4332_2.png) [@roman-edv](https://forums.creativeclouddeveloper.com/u/roman-edv)\
**Post date:** [August 13, 2024, 8:27am UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/1 "2024-08-13T08:27:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [August 14, 2024, 2:23pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/2 "2024-08-14T14:23:21Z")

</div>

I don’t think the InDesign app supports those variables. Would you be fine with listening to theme changes and applying those styles dynamically?

---

<div class="post-metadata">

**Author:** ![roman-edv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roman-edv/32/4332_2.png) [@roman-edv](https://forums.creativeclouddeveloper.com/u/roman-edv)\
**Post date:** [August 14, 2024, 4:21pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/3 "2024-08-14T16:21:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![medium\_jon](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/medium_jon/32/2371_2.png) [@medium\_jon](https://forums.creativeclouddeveloper.com/u/medium_jon)\
**Post date:** [August 19, 2024, 6:37pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/4 "2024-08-19T18:37:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![roman-edv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roman-edv/32/4332_2.png) [@roman-edv](https://forums.creativeclouddeveloper.com/u/roman-edv)\
**Post date:** [August 26, 2024, 11:25am UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/5 "2024-08-26T11:25:52Z")

</div>

Very interesting …  
Thank you, for sharing your solution. Sadly, this somehow doesn’t work for me, except I misunderstood you.

```scss
: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:

![Bildschirmfoto 2024-08-26 um 13.23.23](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/d/d1ce34c68cf63a8682e7ca70e92870c4f9de265b.png)

In the inspector the html element (root) shows the variables, but they seem to be empty.

---

<div class="post-metadata">

**Author:** ![medium\_jon](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/medium_jon/32/2371_2.png) [@medium\_jon](https://forums.creativeclouddeveloper.com/u/medium_jon)\
**Post date:** [August 26, 2024, 11:57am UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/6 "2024-08-26T11:57:37Z")

</div>

Bummer. Sorry that didn’t work for you.  
While it doesn’t work for this case, does it work for any other elements?

Jon

---

<div class="post-metadata">

**Author:** ![roman-edv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roman-edv/32/4332_2.png) [@roman-edv](https://forums.creativeclouddeveloper.com/u/roman-edv)\
**Post date:** [August 26, 2024, 12:28pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/7 "2024-08-26T12:28:09Z")

</div>

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:

```scss
: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);
    }
}

```

```html
          <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:

 ![Bildschirmfoto 2024-08-26 um 14.21.59](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/2/23437851c3993af73c566d5fcd26eb5480f28c79.png)

---

<div class="post-metadata">

**Author:** ![justin2taylor](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/justin2taylor/32/2031_2.png) [@justin2taylor](https://forums.creativeclouddeveloper.com/u/justin2taylor)\
**Post date:** [December 4, 2025, 4:31pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/8 "2025-12-04T16:31:21Z")

</div>

Checking back a year later and it seems InDesign doesn’t have a way to get UXP Theme Colors yet like Photoshop. Is this on the roadmap? @indranil

---

<div class="post-metadata">

**Author:** ![Konogan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/konogan/32/4033_2.png) [@Konogan](https://forums.creativeclouddeveloper.com/u/Konogan)\
**Post date:** [December 8, 2025, 3:54pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/9 "2025-12-08T15:54:04Z")

</div>

Variables do not work in InDesign, but you can work around this by using media queries.

In the documentation table ([Doc](https://developer.adobe.com/indesign/uxp/reference/uxp-api/reference-css/Media%20Queries/prefers-color-scheme/)), InDesign is not explicitly listed (only Photoshop and XD are), but the feature does work.

```auto
@media (prefers-color-scheme: dark) {
…
}

@media (prefers-color-scheme: darkest) {
…
}

@media (prefers-color-scheme: light) {
…
}

@media (prefers-color-scheme: lightest) {
…
}

```

Hope this helps.

---

<div class="post-metadata">

**Author:** ![justin2taylor](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/justin2taylor/32/2031_2.png) [@justin2taylor](https://forums.creativeclouddeveloper.com/u/justin2taylor)\
**Post date:** [December 8, 2025, 5:05pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/10 "2025-12-08T17:05:36Z")

</div>

Thanks, that’s better than nothing, still not great having to guess / color pick colors for each category.

---

<div class="post-metadata">

**Author:** ![shuji](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/shuji/32/4905_2.png) [@shuji](https://forums.creativeclouddeveloper.com/u/shuji)\
**Post date:** [December 9, 2025, 2:39pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/11 "2025-12-09T14:39:45Z")

</div>

I checked the queries, including the query “lightest” which doesn’t work in InDesign 2026, while same CSS code works in InDesign 2025.  
Perhaps it’s a bug.

```auto
:root {
    --theme-background-color: #666;
}

@media (prefers-color-scheme:darkest) {
    :root {
        --theme-background-color: rgb(62, 47, 150);
    }
}

@media (prefers-color-scheme:light) {
    :root {
        --theme-background-color: #ccc;
    }
}

@media (prefers-color-scheme:lightest) {
    /* doesn't work in InDesign 2026, but it works in 2025*/
    :root {
         --theme-background-color: rgb(231, 255, 215);
    }
}

```

---

<div class="post-metadata">

**Author:** ![Konogan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/konogan/32/4033_2.png) [@Konogan](https://forums.creativeclouddeveloper.com/u/Konogan)\
**Post date:** [December 9, 2025, 2:54pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/12 "2025-12-09T14:54:51Z")

</div>

I agree, the _ **lightest** _ doesn’t work in 2026. It’s the _ **light** _ media query that applies in this case.

---

<div class="post-metadata">

**Author:** ![roman-edv](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roman-edv/32/4332_2.png) [@roman-edv](https://forums.creativeclouddeveloper.com/u/roman-edv)\
**Post date:** [December 9, 2025, 4:08pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/13 "2025-12-09T16:08:51Z")

</div>

For querying the color scheme I found a different solution that seems to work in 2026. Kudos to whoever pointed me in that direction, sadly I forgot 🤷‍♂️.

```js
// Set theme initially on plugin load
setTheme();
// Update theme when changed in settings
document.theme.onUpdated.addListener(setTheme);

// set theme class on body element
function setTheme() {
    document.body.removeAttribute('theme');
    let theme = undefined;
    let brightness = app.generalPreferences.uiBrightnessPreference;
    if (brightness <= 0) {
        theme = 'darkest';
    } else if ((0 < brightness) && (brightness <= 0.5)) {
        theme = 'dark';
    } else if ((0.5 < brightness) && (brightness < 1.0)) {
        theme = 'light';
    } else if (brightness >= 1.0) {
        theme = 'lightest';
    } else {
        console.warn("Unknown theme: " + brightness);
    }
    document.body.setAttribute('theme', theme);
}

```

I then use custom CSS variables that I change depending on the body class:

```scss
:root {
    // Fallback colors will be overridden by body with theme attribute
    --col-text: #ffffff;
    --col-secondary: #b9b9b9;
    --col-input: #252525;
    [...]
}
body {
    &[theme='lightest'] {
        --col-text: #323232;
        --col-secondary: #747474;
        --col-input: #ffffff;
        [...]
    }
    &[theme='light'] {
        --col-text: #2C2C2C;
        --col-secondary: #6E6E6E;
        --col-input: #ffffff;
        [...]
    }
    [...]

```

It’s a bit tedious to set all the colors manually, but at least it works.

Interestingly, there’s a strange bug with the _light_ color scheme, which won’t be set correctly if the user switches from _lightest_ to _light_ in the settings. It works correctly if it’s changed from any other theme, just not when the previous theme was _lightest_.

---

<div class="post-metadata">

**Author:** ![Roland\_Dreger](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/roland_dreger/32/3702_2.png) [@Roland\_Dreger](https://forums.creativeclouddeveloper.com/u/Roland_Dreger)\
**Post date:** [December 9, 2025, 10:48pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/14 "2025-12-09T22:48:11Z")

</div>

No one else uses Spectrum Web Components?

Importing the sp-theme component provides you with theme-aware custom properties out of the box.

```javascript
require("@spectrum-web-components/theme/sp-theme.js");
require("@spectrum-web-components/theme/src/themes.js");
require("@spectrum-web-components/theme/src/express/themes.js");

```

```xml
<sp-theme id="panel-theme" system="spectrum" color="dark" scale="medium" dir="ltr">

```

Then you can use the [SWC color palette](https://spectrum.adobe.com/page/color-palette/). If the color attribute changes in sp-theme, the color value changes accordingly.

e.g.

```css
--spectrum-gray-900
--spectrum-blue-500
--spectrum-accent-color-800

```

And other style properties  
e.g.

```css
--spectrum-corner-radius-75

```

One disadvantage is that the colors do not exactly match the background colors of the application’s user interface (at least in InDesign). So that you have to adjust them separately. Therefore, variables for the background colors, as requested above, would still be helpful.

---

<div class="post-metadata">

**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\
**Post date:** [December 12, 2025, 1:00pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/15 "2025-12-12T13:00:18Z")

</div>

> [@roman-edv](#):
>
> uxp-host-background-color

This is something that the InDesign team needs to set from its end. I’ve raised an internal ticket but can’t promise when it will be prioritized.

---

<div class="post-metadata">

**Author:** ![justin2taylor](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/justin2taylor/32/2031_2.png) [@justin2taylor](https://forums.creativeclouddeveloper.com/u/justin2taylor)\
**Post date:** [December 12, 2025, 6:10pm UTC](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287/16 "2025-12-12T18:10:41Z")

</div>

Excellent, thank you!