CODEWITHSUNDEEP
javascripthtmlcsspolymershadow-dom
tn4foxxah
tn4foxxah

Reputation: 297

Polymer change custom-style variable at runtime

I have an application where i want to change the whole theming at runtime. I define the primary colors in my custom-style tag like so:

<style is="custom-style">
  /* Application theme */
  :root {
    --dark-primary-color: #3b280a;
    --default-primary-color: #FDB815;
    --light-primary-color: #fdd85f;
  }
</style>

Would it be possible to apply other values for these variables later? I tried adding a new custom-style file by appending 

<link rel="import" href="../styles/other-style.html">

to the head, but it does not work. I think polymer interprets that at the begining, right? I am now thinking about not using custom-style at all and wrapping my whole app in an element where i can set the styles with variables, but that seems like a lot of work, maybe someone got any better ideas?

Upvotes: 0

Views: 1145

Answers (1)

maxiplay
maxiplay

Reputation: 427

You can do this manually

 this.customStyle['--my-toolbar-color'] = 'blue';
    this.updateStyles();

see the documentation part

Upvotes: 4

Related Questions