How to import stylesheet dynamically Polymer 2.0

Question

I want to import my stylesheet with variable inside :

<dom-module id="colors-palette">
    <template>
    <style>
    :host {
        --dark-gray: #263238;
        --light-gray: #e6ebed;
        --light-blue: #00bcd4;
        --autovision-blue: #174291;

        --background-box-number-applications: red;
        --color-box-number-applications: orange;
    }
    </style>
</template>
</dom-module>

I want to do it dynamically. My folder structure is :

-themes
    -theme1
        -style.html
    -theme2
        -style.html
    -theme3
        -style.html

I detect the theme when my-app is ready and after that I try to import my style like this in the ready function :

Polymer.importHref(this.resolveUrl('../themes/' + this.getCurrentTheme() + '/colors-palette.html'));

The file is loaded but the var in the style in my-app.html doesn't change :

app-header {
    background-color: var(--dark-gray);
}

And I've got this error in the console :

Could not find style data in module named colors-palette

Any idea ? Or maybe I have to do otherwise ?

Thanks a lot

Answer 1

Your colors-palette.html should just contain the styles setting it globally for html.

<custom-style>
    <style is="custom-style">
        html {
            --dark-gray: #263238;
            --light-gray: #e6ebed;
            --light-blue: #00bcd4;
            --autovision-blue: #174291;

            --background-box-number-applications: red;
            --color-box-number-applications: orange;
        }
    </style>
</custom-style>