Dynamic Selection of Polymer theme

Viewed 205

I'm using polymer style-modules to implement theming. To do this I have packaged all the styles in a dom-module, like this:

<dom-module id='my-theme'>
 <template>
  <style>
    :root {
      --primary-text-color: yellow;

      ... more styles ..

    }

    ...

    paper-button.important {
      --paper-button-color: red;

      ... more styles ..

    }
  </style>
 </template>     
</dom-module>

Also made a .dart package to be imported in index.dart:

@HtmlImport("my-style.html")
library my_style.lib;

import 'package:web_components/web_components.dart' show HtmlImport;

Then in the index.html I will use it this way :

<link type='import' href='packages/my-style.html'>
<style is='custom-style' include='my-theme'></style>

Everything is working (don't care possible typos in the example above) even though I had to import the module with an html import and not in the usual dart way with a package import to make it work.

The Question is : this is working with a fixed theme. Is there a way to switch theme dynamically ? i.e. doings something like :

<style is='custom-style' include='[[selectedTheme]]'></style>
0 Answers
Related