Theme Awareness CSS variables InDesign

[roman-edv]

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: