What Is The Best Way To Dynamically Change The Style Of An Application Built With Polymer?

My idea is to have different files (either .css or .html) containing all the rules for a specific theme and load theme dynamically changing the look&feel of the Polymer applica

Solution 1:

Definitely, you have to use custom CSS properties and mixins. If you style your website correctly it will be very easy to swap to different theme.

You can change Custom CSS property value by doing:

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

Every css rule that is using var(--my-toolbal-color) will change to color blue, once you call one ore function:

this.updateStyles();

which tells Polymer, hey i just updated styles can you re-render css rules..

Hope this helps and it's the thing you were looking for. Because what you described was too much complicated i think.

Solution 2:

Not really happy with it but that work :

<linkrel="import"href="my-css.html"><dom-moduleid="my-app"><template><styleinclude="my-css"></style><buttonclass="btn-primary-dark">Dark button</button><buttonclass="btn-primary-light">Light button</button><buttonclass="btn-primary-default">Default button</button><br><br><buttonon-click="setTheme1">Set theme 1</button><buttonon-click="setTheme2">Set theme 2</button></template><script>classMyAppextendsPolymer.Element {
      staticgetis() { return'my-app'; }

      // Dynamicaly change varssetTheme1() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#689F38',
          '--default-primary-color' : '#8BC34A',
          '--light-primary-color' : '#DCEDC8',
          '--text-primary-color' : '#212121'
        });
      }
      setTheme2() {
        Polymer.updateStyles({
          '--dark-primary-color' : '#1f8f37',
          '--default-primary-color' : '#818bbf',
          '--light-primary-color' : '#f0e82f',
          '--text-primary-color' : '#333333'
        });
      }

    }
    window.customElements.define(MyApp.is, MyApp);
  </script></dom-module>

my-css.html

<dom-module id="my-css">
  <template><style>.btn-primary-dark {
          background-color: var(--dark-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-light {
          background-color: var(--light-primary-color);
          color: var(--secondary-text-color);
      }
      .btn-primary-default {
          background-color: var(--default-primary-color);
          color: var(--secondary-text-color);
      }
    </style></template>
</dom-module>