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>