CODEWITHSUNDEEP
javascriptangulardynamicthemespolymer-2.x
moodyjmz
moodyjmz

Reputation: 1

Dynamic Theming and Polymer 2

I'm trying to dynamically theme with polymer 2

I want to be able to load an external html file containing the theme, eg 

<custom-style>
<style>
/* my theme setup */
</style>
</custom-style>

I've put a repo together giving an outline of what I've attempted.

https://github.com/moodyjmz/ang4-p2-theming

So far I've got a slightly hacky solution injecting the import-href in so that it is picked up with shadyCSS. This approach, whilst feeling wrong, works fine x browser, but conflicts with angular 4 polyfills. I can resolve this by modifying the final build index.html to only load angular after the web components polyfill is ready.

However, I would prefer to not do this and have a solution that relies on a less hacky approach

Upvotes: 0

Views: 208

Answers (1)

Benny Powers
Benny Powers

Reputation: 5836

Use

this.updateStyles({
  '--app-foo-style': red,
  '--app-bar-style': `12px`,
});

Upvotes: 1

Related Questions