javascript - What is the best way to dynamically change the style of an application built with Polymer? -

my idea have different files (either .css or .html) containing rules specific theme , load theme dynamically changing look&feel of polymer application @ runtime.

---

i have found pretty useful method described here polymer using custom style @ document level (using .html files)

frequently want define custom property values @ document level, set theme entire application, example. because custom properties aren't built browsers yet, need use special custom-style tag define custom properties outside of polymer element. try adding following code inside tag of index.html file

basically define my-theme.html, defines variables used in application style, looks this:

<style is="custom-style">       /* define document-wide default—will not override :host rule in icon-toggle-demo */       :root {         --icon-toggle-outline-color: red;       }       /* override value specified in icon-toggle-demo */       icon-toggle-demo {         --icon-toggle-pressed-color: blue;       }       /* rule not work! */       body {         --icon-toggle-color: purple;       }  </style> 

and import in index.html file.

---

and found on stackoverflow this method change style dynamically.

html

 <link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" /> 

js

document.getelementbyid('buttonid').onclick = function () {      document.getelementbyid('theme_css').href = '../red.css'; }; 

---

the problem here file rel: stylesheet , changing href causes browser reload file , apply changes, wherease in case changin href of html import doesn't leed same effect.

is there way work want? there better solution achieve goal?

definitely, have use custom css properties , mixins. if style website correctly easy swap different theme.

you can change custom css property value doing:

this.customstyle['--my-toolbar-color'] = 'blue'; 

every css rule using var(--my-toolbal-color) change color blue, once call 1 ore function:

this.updatestyles(); 

which tells polymer, hey updated styles can re-render css rules..

hope helps , it's thing looking for. because described complicated think.