# 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:** 1\
**Showing post:** 7

<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)

---

_[View the full topic](https://forums.creativeclouddeveloper.com/t/theme-awareness-css-variables-indesign/8287)._