Полимер: динамически изменить таблицу стилей

Question

Я бы хотел применить динамические таблицы стилей с помощью Polymer. Сценарий выглядит следующим образом:

<link rel="import" href="themes/red.styles.html" /> 
<link rel="import" href="themes/indigo.styles.html" /> 

<dom-module> 
    <style include="indigo-styles"> 
    <template> 
     <div class="header">Header</div> 
     <button on-click="_toggleStylesheet"></button> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
    _toggleStylesheet: function() { 
     // remove indigo-styles and apply red-styles and so on 
    } 
    }) 
</script> 

Кто-нибудь знает, как это можно достичь в Полимере? Спасибо заранее!

Answer 1

Используйте this.updateStyles чтобы изменить стиль Polymer.Element.

Используйте Polymer.updateStyles применить изменения в глобальном масштабе:

Polymer.updateStyles({ 
    '--property-one': 'var(--paper-red-900)', 
    '--property-two': 'var(--paper-indigo-500)', 
    ... 
    '--property-whatever': 'etc' 
})